CSS模型
标准盒模型
标准盒模型:box-sizing:content里面的宽为内容宽(element宽)
怪异盒模型
怪异盒模型:box-sizing:border-box,里面的宽为(element+padding+border)
内边距,边框设置
- 内边距:padding:顺时针
参数个数
1. 一个:上下左右
2. 两个:上右,下左
3. 三个:上,右,下,左
4. 四个:上,右,下,左- 边框设置:border:1px solid black
border-width: 大小;
border-color: 颜色;
border-style: 样式; 一般为solid(表示实线)
CSS定位
在进行浏览器页面的编程时经常要用到该方法
相对定位
相对定位是指相对于自己的原始位置进行定位,空间不释放(即保留原始空间和定位后空间两个空间)
position:relative
后面可以跟上它定位的位置:top | bottom | left | right
绝对定位
相对于最近已定位的父元素的整体进行定位(没有则相对于body定位),空间释放(即只保留定位后空间)
position:absolute
后面可以跟上它定位的位置:top | bottom | left | right
固定定位
定位在浏览器的某一固定位置,始终不动,类似于侧边广告
position:fixed
后面可以跟上它定位的位置:top | bottom | left | right
静态定位(默认)
不进行定位
position:static
CSS浮动
浮动
使用float关键字进行浮动,浮动脱离文档流,空间释放(相当于元素没有宽高,飘在页面上了,不占有页面的空间),这就可能会导致下面的元素顶上来了,与浮动的元素重合(即浮动塌陷问题)
在进行浏览器页面的编程时经常要用到该方法float: left(左浮)| right(右浮)| none(不浮动,默认)
浮动塌陷问题解决
- 固定元素的宽高
- 父元素样式内写入:overflow:hidden
- 在浮动的块级元素下再加一个块级元素,样式内写入:clear : both
- 专门写一个清浮动的伪类
.clearfix :: after{
content : "" ;
dispaly: block ;
clear: both;
}