css progress04
border 边框
margin 外边距
padding 内边距
element 元素
和写一些border边框
border-top 宽度 样式 颜色/10px solid red
去掉图片边框的写法 border:0 none;
和写pandding 上右下左
内边距享有背景色
margin 有top,bottom,right,left 这几个属性性 也可以使用margin代替所有的
margin
盒子的设置宽和高都是内容的宽和高
第一种外边距合并
当两个div的外边距不一样时,取决于大的哪一个
如:margin:20px; margin:30px; 则外边距合并为30 px;
第二种外边距合并
标准流:水平 从左到右 垂直 上到下
float 浮动的div不占用标准文档流,且下一个div显示内容不受影响,影响排版
浮动特性
overflow: 当盒子内的元素超出自身的大小时,内容就会自动溢出(除i6浏览器外)
css progress05
清楚浮动:隔墙法 在footer之前加一个空表div标签,div清楚两边的浮动,则footer就正常显示
相对定位(relative):是指相对于自身原始的位置向左或向右移多少个像素
绝对定位(absolute):如果div的父类定位是position:static那么就接着往上一层找,一直找到非static父类哪里(俗称:子绝父加/*加relative*/)
float:right也可以达到效果,但是会影响文字排版
绝对居中显示案列 margin:0 auto;
Z-index层叠属性
z-index 越大越往前,会遮挡住比它小的数值,且数值没有单位
固定定位:fixed
background-image:url(image/a.png) background-repeat:no-repeat//图片不重复显示
背景图片优先级高于背景颜色
bacground-posittion
css规避脱标
(不使用浮动元素就可以实现居中,右上角,左上角)
优先2选择标准流,其次使用float,最后选择定位
margin-left; 左侧外边距自动
display 与 vertical-align需配合使用,控制图片的上下位置 如图
CSS元素可见性
CSS标签包含
1、内联元素不能包含块元素,它只能包含其他的内联元素,比如说:span>div is wrong
div>div>ul>li>div is true
2、有些块元素没能放其他块级元素
标题标记的<h1>,<h2>,<h3>,<h4>,<h5>
<p>标签不能嵌套div标签
3、a标签不能嵌套a和input标签,能嵌套的标签像<b><strong>等等
CSS挤走盒子的方法
使用padding or margin 的方法将自己的child变换成自己想要的样子
CSS精灵技术
css精灵技术其实是将网页中的一些背景图像整合到一张大图中
inline-block消除间隙的方法
第一种方法就是font-size:0但会使所有的文字消失,回头设子孩子的font-size:14px;则文字正常使用
第二种方法:第二种方法:第二种方法:使用HTML注释消除空格法,或者将所有的span元素放在一行显示
第三种使用float方法
第四种放大:用letter-space或者是word-sapce调整
第五种:margin负值法
css圆角
height:100px; width:100px; border-radius:50px; 圆角半径如果是正矩形边的一半,则显示的是圆形
css边框的样式设置
加了border-collapse:collapse;之后,显示表格内的元素