前端学习之CSS第三天

前端学习之CSS3第三天

一、CSS的三大特性:层叠性、继承性、优先性

1.层叠性:相同的选择器设置相同的样式,里面的值是不一样的。

原则:就近原则,那个样式离着body近就用那个里面的值。

主要是解决样式冲突的问题。

2.继承性:子标签会继承父标签的某些样式,如文本颜色、字体属性等。

如:行高的继承:如果一个盒子没有高度,如果在body指定行高1.5倍,子元素可以根据自己文字的大小自动调整行高。

3.优先级:

选择器权重
继承或者*0,0,0,0
标签选择器0,0,0,1
类选择器/伪类选择器0,0,1,0
id选择器0,1,0,0
行内样式1,0,0,0
important无穷大

注意:权重会叠加,但是不会进位。继承的权重是0

二、盒子模型

盒子模型的组成:1.内容 2.边框 3.内边距 4.外边距

1.盒子模型的边框 border:

属性作用
border-width边框的粗细,单位是px
border-style边框的样式:solid实线/dashed 虚线/dotted 点线
border-color边框的颜色

边框的复合属性写法没有顺寻的要求,推荐写法为:

border: 1px solid #000;

另外可以给盒子单独设置一个边框:

border-top:1px solid #000

border-bottom: 1px solid #000

border-left:1px solid #000

border-right:1px solid #000

表格细现边框:可以把相邻的边框和并到一起,仅适用于表格中

border-collapse:collapse

注意边框的表格线会影响盒子的实际大小

解决的方法:1.测量盒子大小的时候不要测量边框 2.用width和height减去边框宽度。

2.内边距

内边距主要是设置内容与边框之间的距离

可以在一个盒子中分别设置四个方向的内边距代码如下

padding-top:10px;

padding-bottom:20px;

padding-left:30px;

paddding-right:40px;

内边框(padding)的复合属性的写法

值得个数含义
padding:10px上下左右的边距都为10像素
padding:10px 20px;上下为10像素,左右为20像素
padding:10px 20px 30px上为10 左右为20 下位30
padding:10px 20px 30px 40px;上为10,右为20,下为20,左40

注意:内边距(padding)也会影响盒子的大小

解决的方法:用width和height减出多出来的内边距(padding)

2.1 处理行内块元素(inline-block)的间隙的方法:

将父元素的字体设为0(font-size),内部重新设置字体

2.2 如果块元素的宽度(width)没有被指定,padding不会撑大盒子的宽度。

前提是padding小于父盒子的宽度。

3.外边距:控制盒子与盒子之间的距离

可以给一个盒子分别设置外边距如下:

margin-top:10px;

margin-bottom:20px;

margin-left:30px;

margin-right:40px;

margin外边距符合属性的写法

值得个数含义
margin:10px;上下左右的外边距
margin:10px 20px;上下的边距为10,左右的为20
margin:10px 20px 30px;上为10,左右为20,下为30
margin:10px 20px 30px 40px;上为10,右为20,下为30,左为40

用外边距来实现块级盒子水平居中两个条件:1.盒子必须有宽度 2.水平间距设置为auto 比如:margin:10px auto;

让行内元素和行内块元素水平居中方法是:给其父元素添加 text-align:center

3.1 相邻元素垂直外边距合并的情况,解决的方法:上面的盒子设置 margin-buttom,下面的盒子设置 margin-top ,只会取最大的值,所以之能给一个盒子设置外边距。

4.外边距合并-嵌套块元素塌陷

嵌套块元素塌陷的情况: 1.父子元素同时具有上外边距 2.父元素会塌陷较大的外边距

解决的方案:1.给顶部增加边框 2.顶部增加内边距 3.overflow:hidden

5清除内外边距:网页的元素中都有默认的内外边距,清除内外边距可以避免样式对布局的干扰。

写法: * {
margin:0px;

​ padding:0px;

​ }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值