CSS进阶内容——盒子和阴影详解
CSS进阶内容
在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章
当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园
CSS三大特性
首先我们先来了解CSS的三大特点,以便于我们下面知识点的讲解
CSS三大特性包括:
- 层叠性
- 继承性
- 优先级
层叠性
当相同的选择器设置相同的样式,却含有不同的样式值时,此时一个样式就会覆盖掉另一个冲突的样式,层叠性就是为了解决这个问题
层叠性原理:
- 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
- 当样式不冲突时,不发生层叠性
下面给出代码示例:
层叠性
123
继承性
CSS中的继承:
- 当子类未设置对应属性时,子类继承成父类的某些样式(例如:字体颜色,字体大小等)
- 恰当使用可以简化代码,降低css复杂性
- 子元素只能够继承父类的某些样式(text-,font-,line-这些元素开头的,以及color属性)
下面给出代码示例:
继承性
123321
继承中的特殊属性-行高:
- 当继承行高时,可以采用font:字体大小/字体行高
- 这里的行高可以不带像素px,而直接写2或1.5表示是字体大小的2倍或1.5倍
- 这样我们就可以根据自己的字体大小来调整行高
下面给出代码示例:
继承性
123321
123321
优先级
当一个元素指向多种选择器时,会产生优先级
每种选择器都具有一定的权重:
选择器 | 选择器权重 |
---|---|
继承或* | 0.0.0.0 |
元素选择器 | 0.0.0.1 |
类选择器,伪类选择器 | 0.0.1.0 |
ID选择器 | 0.1.0.0 |
行内样式 | 1.0.0.0 |
!important 重要的 | 无穷大 |
注意:
- 权重由四组数决定,无法进位
- 从前往后比较
- a链接默认制定样式,若修改需要对a改变
权重叠加:
- 当采用复合选择器时,把所有选择器权重相加
- !!!注意:不可进位
盒子模型
盒子模型是我们网络布局的最基础元素
网络布局过程:
- 先准备相关网页元素,网页元素基本都是盒子Box
- 利用css设计好盒子样式,并摆放到相应位置
- 往盒子里装内容
盒子模型组成部分
盒子模型由四部分组成:
- 边框 border
- 内容 content
- 内边距 padding
- 外边距 margin
边框(border)
边框border可以设置元素的边框,边框由三部分组成:边框宽度,边框样式,边框颜色
语法:
border-color:边框颜色
border-width:边框宽度
border-style:边框款式(solid实线,dashed虚线)
border:颜色 宽度 款式(可以简化一起设置)
边框是可以分别设置的:
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
当我们只希望改变一条边框时,可以先定义全边框,再定义特别边框,这样css就会利用层叠性实现效果:
盒子边框
注意:当两侧都具有边框时,边框会汇聚在一起导致边框效果大打折扣
所以css提供了border-collapse:collapse来合并边框
小说排名案例
排名
关键词
趋势
进入搜索
最近七日
相关链接
1
鬼吹灯
上升
456
123
贴吧 图片 百科
1
鬼吹灯
上升
456
123
贴吧 图片 百科
1
鬼吹灯
上升
456
123
贴吧 图片 百科
1
鬼吹灯
上升
456
123
贴吧 图片 百科
注意:边框会影响盒子实际大小
所以我们在设计盒子时需要保留边框粗细大小
例如:
- 当我们需要一个总体积为20*20的盒子,且需要边框2px
- 那么我们div的height和width只需设计到18px,然后我们再加上border-width:2px即可
内边距(padding)
padding属性用来设计内边距,即边框与内容之间的距离
主要分为四个内边距:
- padding-top 上内边距
- padding-bottom 下内边距
- padding-left 左内边距
- padding-right 右内边距
内边距也存在简写方法:
/* 全部内边距 */
padding: 5px
/* 上下和左右 */
padding: 5px 10px
/* 上和左右和下 */
padding: 5px 10px 15px
/* 上和右和下和左 */
padding: 5px 10px 15px 20px
注意:padding也会影响盒子的大小
当存在padding时,盒子大小也会相应增加相对大小
所以我们在设计盒子时,同样也需要留下padding距离的大小
案例:巧妙利用padding设计导航栏
padding应用于导航栏
特定情况:当盒子没有设置height或者width时,padding不会撑开盒子
外边距(margin)
margin用来设置外边距,即控制盒子与盒子之间的距离
主要分为四个外边距:
- margin-top 上外边距
- margin-bottom 下外边距
- margin-left 左外边距
- margin-right 右外边距
外边距和内边距的简写方法也与padding完全相同:
/* 全部内边距 */
margin: 5px
/* 上下和左右 */
margin: 5px 10px
/* 上和左右和下 */
margin: 5px 10px 15px
/* 上和右和下和左 */
margin: 5px 10px 15px 20px
外边距典型应用:使块级盒子水平居中
要求:
- 盒子具有宽度width,高度height
- 盒子内设置margin: 0 auto;(只要保证左右margin是auto就确保居中)
下面给出代码示例:
块级元素居中
接下来我们也稍微介绍一下对于行内块/行内元素居中的方法:
- 使其对应的父类元素加上text-align:center即可
- 因为对于父类来说,行内块/行内元素属于父类的内部元素,所以将父类的内部元素居中即可实现行内块/行内元素居中
下面给出代码示例:
块级元素居中
嵌套块元素垂直外边距塌陷问题:
- 当出现嵌套关系(父子关系)时,父元素和子元素同时有外边距时,此时父元素会塌陷较大的外边距值
解决方案:
- 为父元素定义一个上边框:border:1px solid transparent
- 为父元素定义一个内边距:padding:1px
- 为父亲添加overflow:hidden
外边距塌陷问题
注意:因为网页很多元素都带有内外边距,且在各浏览器中标准不同,所以我们通常清除内外边距
我们常常把这行代码作为css内容的第一行
* {
padding: 0;
margin: 0;
}
稍微提一句:行内元素尽量只设置左右内外边距
案例:BOX模块案例
让我们通过HTML和CSS还原下面这个网页排版
图片:
代码:
案例
快递牛,整体不错,蓝牙都可以秒连
来自1923134的评价
Redmi AirDots真无线蓝...|99.9元
在这里插上一句:(因为我自己第一次做时出现了问题所以想向你们提醒一下)
- 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:h1、h2、h3、h4、h5、h6、p、dt
- 这里例如最后一行p,我们不能插入h标题元素
平面布局改善
除了正常的布局改善,我们也可以通过其他方法获得好看的图形样式
例如圆角边框和阴影,就会为我们的Web页面起到美化的作用
圆角边框
border-radius就是用来控制图形四角的曲度
div {
/*
border-radius:length;里面设置的边角圆的半径,也可也设置百分比
如果你想获得一个圆形,需要把高度宽度设置一致且length设置成图形直径的一半即可();
如果你想获得一个圆角矩形,只需把length设置为高度的一半即可
注意:这里的角仍旧可以单独设置
当两个值时顺序分别是左上和右下,右上和左下
当四个值时顺序分别是左上,右上,右下,左下
*/
border-radius:length;
}
盒子阴影
box-shadow用来设置盒子阴影
box-shadow通常有六个内部设置,一般直接简写:
- box-shadow: 水平阴影(px) 垂直阴影(px) 模糊距离(px) 阴影尺寸(px) 颜色(color) 内部/外部(insert/outset)
- 我们一般常用设置为box-shadow: 10px 10px 10px -4px rbga(0,0,0,0.3)
- 注意:不可以写outset,outset是默认的,如果写了会导致阴影失效
- 注意:阴影不占用盒子大小
下面我们给出代码示例:
盒子阴影
文字阴影
text-shadow用来设置盒子阴影
box-shadow通常有四个内部设置,一般直接简写:
- box-shadow: 水平阴影(px) 垂直阴影(px) 模糊距离(px) 颜色(color)
- 使用不多,了解即可
结束语
好的,CSS进阶内容—盒子和阴影我们就讲到这里,你是否全部了解了呢?
下面我会介绍浮动定位,敬请期待哦~