css盒子布局,浮动布局以及显影与简单的动画

08.05自我总结

一.盒子布局

1.盒子布局的组成

  • margin
  • border
  • padding
  • content

2.margin

margin是外边距,控制盒子的显示位置相对于他的上一级

left、top控制自身,right、bottom影响兄弟

3.border

  • 宽度:border-width
  • 颜色:border-color
  • 透明度:transparent
  • 样式:border-style:

    常用的样式

    • none:没有边框
    • solid:实线
    • dashed虚线
    • dotted点或者方框根据浏览器不同样式有有点区别
  • 透明度:颜色里面的用rgb颜色第四个参数来控制来控制

4.content

content是宽x高,作为内容或子标签的显示区域

padding与边框之间的距离

5.盒子阴影

box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色

6.重点

  • 盒模型:margin、padding协调操作,能用padding尽量用padding,再考虑用margin
  • 父子级顶端产生距离,建议使用padding
  • margin、padding的参数auto自动获取留白区域适用根据留白地方居中使用

二.浮动布局

1.浮动布局

float

1.子集浮动参照父级宽度
2.子集浮动不再撑开父级高度
3.父级高度需要自己处理,否则会影响兄弟布局,采用清浮动处理

2.after|before

after与before是伪类

他们与CSS选择器直接用:连接

after元素出现后

before元素出现前

3.清浮动

父级清浮动,就是在自己宽度是否确定下,都能保证父级的高度刚刚好包裹子集

需要左右排列的block采用浮动布局,且父级一定要清浮动

方法一:

.浮动的标签:after {
    content: '';
    display: block;
    clear: both;
}

方法二:

.浮动标签下一个要显示的标签(会受到他浮动影响的):before {
    content: '';
    display: block;
    clear: both;
}

三.动画

1.显隐

? 1)display:none | block 不可以做动画
? 2)opacity: 0 | 1 可以做动画
? 3)width:0 | height: 0 可以做动画

2.动画

transition: 动画时间(.5s) 延迟时间(.1s) 动画属性(all) 运动曲线(ease)

原文地址:https://www.cnblogs.com/pythonywy/p/11305228.html

时间: 2024-10-11 17:48:13

css盒子布局,浮动布局以及显影与简单的动画的相关文章

前端 盒模型布局 浮动布局

盒模型布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒模型布局</title> <style> body { margin: 0; padding: 100px 0 0 200px; } /*盒模型组成部分: */ /*margin + border + padding + content 1.每部分都有自己的独立区域 2.

web前端学习笔记(CSS盒子的浮动)

Posted on 2013-09-18 09:00 Stephen_Liu 阅读(2205) 评论(6) 编辑 收藏 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里

CSS盒子的浮动

在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用"浮动"方式后,块级元素的表现就会有所不同.      CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里面的内容的宽度来确定. 准备基础代码 浮动的性质比较复杂,这里先制作一个基础的页面,代码如下.后面一系列的实验

css盒子的浮动(一)

使用下面的代码作为演示例子. <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>无标题文档</title> <style type=”text/css”> body{ margin:15px; font-family:Arial; font-size:12px; } .father{ background

浮动布局及盒子模型

今天巩固了一周学的知识,我感觉超链接样式.背景样式.列表样式比较麻烦,还需要多加练习. 学习了盒子模型,内容不是很多,但需要注意的地方很多: 首先在设置css样式的时候先初始化 *{margin:0px:padding:0px:} 学习了div标签:不是功能标签,可以放文字图片以及各种元素的快标签,常用来布局 浮动布局 float属性 属性值 说明 left 元素向左浮动 right 元素向右浮动 clear属性 属性值 说明 left 清除左浮动 right 清除右浮动 both 左右浮动一起

浅谈CSS盒子模型

[摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于整个HTML文档的布局也会产生很大的帮助和促进.本文尝试在介绍CSS盒子模型基本概念和组成元素属性的基础上,结合个人学习经验对其在网页制作中的实际应用谈一谈自己浅显的观点和看法.[关键词]盒子模型:表现效果:网页布局: CSS是Cascading Style Sheets的缩写,中文意思是层叠样式表

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

左边logo 右边广告图片布局 div css左右浮动布局实例

左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左

CSS浮动布局与菜单栏设计

公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档流,导致下面的元素向上提.  布局存在问题:由于浮动元素宽度已设定,根据盒模型,对于有宽度的盒子添加padding border和magin导致盒子变大,从而挤出后面浮动元素,导致下移,称作"浮动移滑". 围住浮动元素的三种方法: 1为父元素添加 overflow:hidden   强制包