选择器优先级、字体属性、背景属性、边框属性、display属性、盒子模型、浮动
学习内容总结
今日学习内容总结
在昨日的学习中，我们对from表单和css的各类选择器都进行了相应的学习。而今天的学习内容以css为重心。还是学习css的相应内容。
伪元素选择器
伪类元素选择器是通过css操作文本内容的选择器，作用是为某个元素的前面或者后面添加子元素。格式：
1. 标签::before{属性: 值;}。在标签之前添加子元素
2. 标签::after{属性: 值;}。在标签之后添加子元素
3. content:在伪元素选择器中代表内容；
4. visibility: hidden:将伪元素选择器隐藏
使用案例：
# css
<style>
div:before{
content: 'hhhh';
height: 50px;
height: 100px;
background-color: deepskyblue;
display: block;
}
div:after {
content: "22222";
height: 50px;
width: 100px;
background-color: red;
display: block;
visibility: hidden;
}
</style>
# body
<div>
<p>内容</p>
</div>
实现效果为在内容上方有一个宽100px高为50px的hhhh内容。hhhh就是在div标签之前添加的元素中所代表的的内容。颜色背景为浅蓝色。而在div标签之后添加的内容用visibility功能隐藏了。使用场景：
1.用于后面清除浮动带来的负面影响
2.用于网站的内容防爬
选择器优先级
两个方向：相同选择器和不同选择器。
1.相同选择器
就近原则 :谁离标签越近就听谁的。
2.不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
字体
字体样式
css中的字体样式一般包含有就9中，常见的有7种。这7种依次为：
1.字体样式：font-family；
2.字体大小：font-size；
3.字体加粗：font-weight；
4.字体斜体：font-style；
5.颜色：color；
6.文本装饰线条：text-decoration；
7.文字阴影：text-shadow；
写法案例:
# 文字字体
p { font-family:‘宋体'，'黑体', 'Arial’ }；
# 文字大小
p{font-szie：20px}
# 字体粗细
p { font-weight:bold;}
# 字体颜色的三种方式
# 方式1
color: red;
# 方式2:
color: rgb(128, 128, 128);
# 方式3:
color: #4f4f4f;
# 其实还有很多获取颜色的方式，比如截图软件，或者pycharm提供的取色器
# 字体倾斜
p { font-style: normal; } # 其默认的属性值为normal，即正常显示的字体样式，其另外的两个属性值都讲呈现斜体的效果哦。
字体属性
字体属性主要体现在文字对齐，文字装饰以及首行缩进上。
# 文字对齐
text-align:center/left/right
# 文字装饰
# a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)
text-decoration: none; 主要就是用于去除a标签的下划线
text-decoration: line-through; 删除线
text-decoration: overline; 上边线
text-decoration: underline; 下划线
# 首行缩进
text-indent: 32px; # 首行缩进32px
其实我们还可以使用浏览器做样式的动态调整，查找到标签的css，然后左键选中，通过方向键上下动态修改数值。
背景属性
# 背景颜色
background-color : 任意合法的颜色 和 transparent
# 背景图片
background-image : url(想要加载的图片）
# 1. 背景图片平铺
background-repeat :
repeat：默认值水平垂直方向都平铺
repeat-x : 水平方向平铺
repeat-y : 垂直方向平铺
no-repeat : 默认不平铺
# 2. 背景图片的尺寸
background-size ：value1 value2 宽度 高度 （单位px）
value% value% 宽度 高度 （单位%）
cover ：全覆盖 将背景图等比放大知道背景图完全覆盖到元素的所有区域
contain : 包含 将背景图等比放大，直到下边或者右边有一个边缘碰到元素为止
# 3. 背景图片固定
background-attachment : fixed;(固定）
scorll(滚动）
边框属性
# 1.自定义调整每个边的边框
border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 5px;
border-left/top/right/bottom-style: solid;
# 2.统一调整每个边的边框
border: 5px solid black; 顺序无所谓 只要给了三个就行
"""
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
"""
# 3.画圆
border-radius: 50%
如果长宽一样那么就是圆 不一样就是椭圆
display属性
只要块儿级标签可以设置长宽，行内标签是不可以的(长宽有内部文本决定)。
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留
盒子模型
所有的标签其实都有一个盒子模型。盒子模型的组成成分：
# 盒子模型
# 内部物品
content(内容)
内部物品与盒子内部的距离 padding(内边距、内填充)
盒子的厚度
border\边框
盒子与盒子之间的距离 margin(外边距)
1.body标签默认自带8px的margin值，我们在编写页面之前应该去掉。
margin 可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
使用语法：
# 使用单独属性设置四边的距离
#d2 {
border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */
margin-top: 20px; /*上边距为20px*/
margin-right: 30px; /*右边距为30px*/
margin-bottom: 40px; /*下边距40px*/
margin-left: 50px; /*左边距为50px*/
}
# 直接使用margin属性设置所有外边距
#d2 {
border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */
margin: 20px 30px 40px 50px; /*和上图所示效果完全一样,相当于上个案例的简化写法*/
}
使用margin简化写法注意事项:
1. 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
2. 如果只提供一个，将用于全部的四边。
3. 如果提供两个，第一个用于上、下，第二个用于左、右。
4. 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
padding用法与margin一致，padding 是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
一个元素的内边距区域指的是其内容与其边框之间的空间，内边距控制的是元素内部空出的空间，相反，margin 操作元素外部空出的空间。
padding属性构成
padding-top：内容上边距
padding-bottom：内容下边距
padding-left：内容左边距
padding-right：内容右边距
浮动
浮动简介
HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。
float的四个值：
left ：元素向左浮动。
right ：元素向右浮动。
none ：默认值。
inherit ：从父元素继承float属性。
浮动的影响
浮动后的div宽度会变成0，但是其内边框可能撑起它的宽和高。浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)。
如果浮动的div前面有同级别html元素，该浮动的div会排在html元素后面浮动，不会覆盖html元素。 浮动的元素有时候也会遮挡住底下的区域，如果区域内有文本内容，那么浏览器会遵循文本内容优先展示的原则，会想法设法让文本展示出来。
解决浮动造成的影响
前面div的浮动会影响后面的div的布局，如果想消除该影响可以使用clear:left | right | both。规定元素的哪一侧不允许其他浮动元素。
代码示例：
# css
<style type="text/css">
.outside{
font-size:12px;
font-family: Arail;
padding:10px;
background-color:#fffcd3;
border:1px solid black;
width:50%;
}
.inside1{
padding:10px;
border:1px dashed black;
background:#a9d6ff;
margin:5px;
float:left;
/* 1.div1向左漂浮之后，宽度为0
2.div1移到父元素的左边
3.div1的原始位置被空出来，由后面的html元素来补上。
*/
}
.inside2{
padding:10px;
border:1px dashed black;
background:#a9d6ff;
margin:5px;
float:right;
}
.inside3{
padding:10px;
border:1px dashed black;
background:#ffacd3;
clear:both;
/* left消除左边漂浮的影响
right消除右边漂浮的影响
both消除两边漂浮的影响
*/
}
</style>
# body
<div class="outside">
<div class="inside1">内部div1</div>
<div class="inside2">内部div2</div>
<div class="inside3">内部div3</div>
</div>
浙公网安备 33010602011771号