css盒模型
css
css的padding属性和border属性,margin属性,background属性;
css三大特征: 层叠性,继承性,优先级;
层叠性: 多种样式的叠加;样式不冲突 不会层叠;如果样式冲突,遵循就近原则;
继承性: 资源色会继承父元素的样式,可以继承的属性:text- ;font-;line-;color;
优先级: 权值越大优先级越高;(通配符选择器(0);标签选择器(1);类选择器(10);id选择器(100);行间样式(1000);!important,优先级高于行间样式(例:background-color=blue !important);)
行间样式的优先级高于id选择器的优先级;
继承样式的权值为0;子元素中设置的样式会覆盖继承到样式;
样式引入的优先级:
行间样式(内联式)>内部样式(嵌入式)>外部样式(引入式);
行间样式的优先级最高(但高不过!important)内部、外部就近原则(距离被设置元素越近优先级越高);
-
盒模型( Box Model)
也称框模型,在页面布局中将页面样色合理有效地组织在一起,形成一条完整行之有效的规则和规范,称之为盒模型;
包括的元素:内容(content)、内填充(padding)、边框(border)、外边距(margin)几个要素。
css盒模型的本质是一个盒子,封装周围的HTML元素;
(1)、盒模型的相关属性:
内容属性:
width属性:宽度 取值:auto(默认值) 数值单位(px、em、 %、rem)
height属性:高度 取值:auto(默认值) 数值单位(px、em、 %、rem)
(2)、内填充(padding) 内边距:元素边距和元素内容的区域;
单边内填充:
padding-top(上)、 padding-right(右)、padding(下)、padding(左);
复合写法:
padding:上(npx) 右(mpx) 下 (xpx)左(ypx)(顺序);
百分比:上下内填充和左右内填充百分比数组是相对于父元素的width属性的大小而言的;
(3)、border(边框):围绕元素内容和内填充的线;
边框属性:border-right:边框宽度;
border-style:边框样式(线性);
border-style:none;没有边框;
border-style:solid;实线;
border-style:double;双实线;
border-style:dashed;条状虚线;
border-style:dotted;点状虚线;
border-color:边框颜色;
单边属性:
border-top上边框;
border-top-width:上边框的宽度;
border-top-style:上边框的样式;
border-top-style:上边框的颜色;
border-right和border-bottom和border-left同上;
默认的边框颜色是元素本身的前景色;如果没有为元素本身设置边框颜色和前景色,它将于父元素的前景色一致;
(4)、margin(外边距):定义元素周边的空间;
单边外间距:
margin-top:上外边距;-right 右外边距; -bottom 下右边距;-left;左外边距;
margin:;一个数时设置四个边的属性;两个数时上下一样,左右一样;三个数是上下样式不一样,左右样式一样;四个数时,四个数本别代表盒子的上、右、下、左四个边;
margin:0 auto; 固定宽度且水平居中,必须与width属性配合使用,时间盒子的水平居中;
margin值的问题: 垂直方向相邻的margin值相遇会叠加的问题;两个值相同取当前值;两个值不同时,取较大值;
当子元素添加margin-top值时,会把父元素拉下来;
产生问题的条件:当子元素和父元素之间没有内容,父元素没有border值;
解决问题的方法:
给父元素设置border-top值,
转换思路,巧用padding值,规避margin值;
实现效果:
触发BFC (Block Formatting Context 块级匀速格式格式化上下文,是web页面的可视化css视觉绚烂的一部分。用于决定盒子的布局浮动相聚影响范围的一个区域)改变父级的绚烂规则。
方法:
position:absolute/fixed;
display:inline-block;
float:left/right;
overflow:hidden;
行级元素的上下外边距用户看不到(实际不占上下外间距的); -
背景(background-)
(1)、背景颜色:background-color:;默认值为transparent(透明) 应用于padding border所在区域;
(2)、背景图片:backgroun-image:URL(图片地址);
背景图片是不占位的;
默认背景图片的水平居中和垂直方向重负平铺;
背景图片会铺满整个区域范围;
背景图片是网页的装饰,只起美化页面的作用;
背景图片写在样式中;
背景图片不会被搜索引擎搜索到;
图片名称可以是英文 英文和数字的混合、但不能使用中文;
(3)、背景图是否重复
background-repeat:repeat;默认值背景图片在水平和垂直方向都重复;
background-repeat:repeat-x;背景图片在水平方向重复; background-repeat:repeat-y;背景图片在垂直方向重复;
background-repeat:no-repeat;都不重复;
(4)、背景图片的位置:
background-position:xpos,ypos;属性值一般有两个水平位置的垂直位置用空格隔开;
关键字:left/right/center 、top/bottom/center;
如果只出现一个关键字,那么另一个关键字是center;
长度值:图片的左上角是0px, 0px,负值是向盒外,正值是向盒内;
百分比:左上角是0% 0%,右下角是100% 100%,相当于元素本身的宽度和高度设置,如果只提供一个百分数值,提供的值作为水平方向位置,垂直方向假设为50%;
(5)、背景图关联
background-attachment:scroll;默认值,背景图片随网页滚动而滚动
background-attachment:fixed;图片图固定;
(6)、复写样式:
background: background-color(背景颜色) url(图片地址)(背景图片) background-repeat(背景图是否重复) background-position (背景图定位)background-attachment(背景图关联);标准盒模型的计算公式
盒子的实际高度 =height(内容高)+padding-top(上填充/上留白) padding-bottom(下填充/下留白) border-top(上边框) border-bottom(下边框);
盒子的实际宽度 =width(内容宽)+padding-left + padding-right + border-left + border-right;
样式重置
网页在显示的过程中由于浏览器的内核不同,对默认样式属性值得皆也不同,将所有的元素的自带样式去掉,然后重置,可以在不同内核的浏览器中都能解析到相同的属性;