选择器
###复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 将class为red的元素设置为红色(字体) */
.red{
color: red;
}
/* 将class为red的div字体大小设置为30px */
/* 交集选择器
作用: 同时选择复合多个条件的元素
语法: 选择器1选择器2选择器3选择器n{}
注意点:
交集选择器中如果有元素选择器必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.a.b.c{
color: cornflowerblue;
}
/* 选择器分组(并集选择器)
作用: 同时选择多个选择器对应的元素
语法: 选择器1,选择器2,选择器3,选择器n{}
让h1和span字体颜色为绿色*/
h1,span{
color:green;
}
</style>
</head>
<body>
<div class="red"> 我是div</div>
<p class="red"> 我是p元素</p>
<div class="red2 a b c "></div>
<h1>标题</h1>
<span>哈哈哈哈</span>
</body>
</html>
关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 为div的子元素span设置一个字体颜色红色
(为div直接包含的span设置一个字体颜色)
子元素选择器
作用:选中指定父元素的指定元素
语法:父元素>子元素
*/
/* div>span{
color: orange;
} */
/* 后代元素选择器
作用:选中指定元素内的指定后代元素
语法: 祖先 后代
*/
/* div span{
color: skyblue;
} */
/*
兄弟选择器:选择下一个兄弟
语法:前一个 + 下一个 (两个必须紧挨着)
相邻选择器 选择下边所有的兄弟元素(拥有相同的父级)
语法: 兄 ~ 弟
*/
p+span{
color: red;
}
p~span{
color: royalblue;
}
</style>
</head>
<body>
<!--
父元素:直接包含子元素的元素叫做父元素
子元素:直接被父元素包含的元素叫做子元素
祖先元素:直接或间接包含后代元素的元素叫做祖先元素
一个元素的父元素也是它的祖先元素
后代元素: 直接或间接被祖先元素包含的元素叫做后代元素
兄弟元素:拥有相同父元素的元素是兄弟元素
-->
<div>
我是一个div
<p>我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>
</div>
<span>我是div外的span</span>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有指定值的元素
*/
p[title $= abc]{
color: sandybrown;
}
</style>
</head>
<body>
<p title="abc">00000000000</p>
<p title="abcde">00000000000</p>
<p title="helloabc">00000000000</p>
<p title="">00000000000</p>
<p title="">00000000000</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将ul里的第一个li设置为红色
*/
/* 伪类(不存在的类,特殊的类)
-伪类用来描述一个元素的特殊状态
比如,第一个元素,被点击的元素,鼠标移入的元素....
-伪类一般情况下都是使用:开头
:first-child (第一个子元素)
:last-child:(最后一个元素)
:nth-child() 选中第n个元素
特殊值:
n,会选中第n个,n的范围是0到正无穷
2n或even,表示选择偶数位的元素
2n+1或odd,表示选中奇数位的元素
-以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能与上述的类似,不同点是题目是在同类型元素种进行排序
:not() 否定伪类
-将符合条件的元素从选择器中去除
*/
/* ul > li:first-child{
color: chartreuse;} */
/* ul>li:last-child{
color: aqua;
} */
/* ul>li:nth-child(2){
color: red;
} */
/* ul>li:first-of-type{
color: red;
} */
ul>li:not(:nth-of-type(3)){
color: royalblue;
}
</style>
</head>
<body>
<ul>
<span>我是一个span</span>
<li >第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
a元素的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
:link 用来表示没访问过的链接(正常的链接)
*/
a:link{
color: red;
}
/*
:visited 用来表示访问过的链接
由于隐私的原因,visited 这个伪类只能修改链接的颜色
*/
a:visited{
/* font-size: 50px; */
color: royalblue;
}
/*
:hover 用来表示鼠标移入的状态
*/
a:hover{
color:turquoise;
font-size: 50px;
}
/*
:active 用来表示鼠标点击
*/
a:active{
color: yellowgreen;
}
</style>
</head>
<body>
<!--
1.没有访问过的链接
2.访问过的链接
-->
<a href="https://www.baidu.com">访问过的链接</a>
<br><br>
<a href="https://www.baidu123.com">没有访问过的链接</a>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 20px;
}
/*
伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
伪元素使用::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的开始
::after 表示元素的最后
-before 和after 必须结合content属性来是使用
*/
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: greenyellow;
}
/* div::before{
content: 'abc';
color: red;
}
div::after{
content: "haha";
color: blue;
} */
div::before{
content: 'I';
}
div::after{
content: 'I';
}
</style>
</head>
<body>
<div>
hello hello how are you
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione voluptatem in quas perferendis maxime necessitatibus odit dolorum alias cum recusandae fuga vero labore minus deleniti a molestias, nam excepturi. Itaque!
</p>
</body>
</html>
样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 12px;
}
/*
样式的继承:
我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先 和后代之间的
继承的设计是为了方便我们的开发,
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,
这样只需设置一次即可让所有的元素都具有该样式
但是注意:并不是所有的样式都会被继承
比如 背景相关的,布局相关等的这些样式都不会被继承
*/
p{
color: red;
}
div{
color: royalblue;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素中的span</span>
</p>
<span>我是p元素外的span</span>
<div>
我是div
<span>我是div中的span</span>
<em>我是span中的em</em>
</div>
</body>
</html>
选择器的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
background-color: aqua;
}
div{
color: yellow;
font-size: 20px;
}
.d1{
background-color: chartreuse !important;
}
.red{
color: red;
/* font-size: 20px; */
}
div,p,span{
background-color: blueviolet;
}
*{
font-size: 50px;
}
/*
样式的冲突
-当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值
此时就发生了样式的冲突
发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定
选择器的权重
内联样式(行内样式) 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器的优先级 0
继承的样式 没有优先级
比较优先级时,需要将所有的选择器优先级进行计算,最后优先级越高,则越优先显示(分组选择器是单独计算)
如果优先级计算后相等,此时则优先使用靠下的样式
可以在某一个样式的后边添加!important,则此时该样式会获取到最高的优先级,甚至超过内联样式.
注意:在开发中这个要慎用!无法覆盖更改
*/
</style>
</head>
<body>
<div id="box1" class="red d1 d2 " style="background-color: coral;" >我是一个div</div>
</body>
</html>
单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 30px;
}
.box1{
/* 长度单位:
像素
-屏幕(显示器)实际上由一个个的像素点构成
-不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
-所以同样的200px在不同的设备下显示效果不一样
百分比:
-也可以将属性值设置为相对于父元素属性的百分比
-设置百分比可以使元素跟随父元素的改变而改变
em:
- em是相对于元素的字体大小来计算的
- 1em = 1font-size
- em会根据字体大小的改变而改变
rem:
- rem是相对于根元素的字体大小来计算
- 根元素为 html
*/
width: 200px;
height: 200px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
.box3{
font-size: 20px;
/* width: 10em;
height: 10em; */
width: 10rem;
height: 10rem;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
颜色单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
/*
颜色单位:
在CSS中可以直接使用颜色名来设置各种颜色
比如:red,orange,yellow,green,blue ......
但是在css中直接使用颜色名是非常不方便的,
RGB值:
- RGB通过3种颜色的不同浓度来调配出不同的颜色
- R red ,G green,B blue
-每一种颜色的范围在 0 - 255 (0% -100%)之间
-语法: RGB(红色,绿色,蓝色)
RGBA:
- 就是在RGB的基础上增加了一个a表示不透明度
-需要4个值,前三个和RGB一样,第四个表示不透明度
1表示完全不透明,0表示完全透明 ,0.5半透明
十六进制的RGB值:
- 语法: #红色绿色蓝色
- 颜色浓度通过 00 - ff
-如果颜色两位两位重复可以简写
#aabbcc --> #abc
#aabbcd 不能简写
HSL值和HSLA
-H 色相 (0 - 360)
-S 饱和度 颜色的浓度 (0& -100%)
-L 亮度 颜色的亮度 (0% - 100%)
*/
background-color: rebeccapurple;
background-color: rgb(255,0,0);
background-color: rgb(0,255,0);
background-color: rgb(0,0,255);
background-color: rgb(255,255,255);
background-color: rgb(123,255,255,0.5);
background-color: #ff0000;
background-color: #ffff00;
background-color: #ff0;
background-color: #bfa;
background-color: hsl(0,100%, 20%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
盒子模型
文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
background-color: yellow;
width: 100px;
}
.box2{
width: 100px;
background-color: red;
}
span{
background-color: #bfa;
}
</style>
</head>
<body>
<!--
文档流(normal flow)
-网页是一个多层的结构,一层摞着一层
-通过css可以分别为每一层来设置样式
-作为用户来讲只能看到最顶上一层
-这些层中,最底下的一层称为文档流,文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
-对于我们来说元素主要有两个状态
在文档流中
不在文档流中(脱离文档流)
-元素在文档流中有什么特点
-块元素
-块元素会在页面中 独占一行
-默认宽度是父元素的全部(会把父元素撑满)
-默认高度是被内容撑开(子元素撑开)
-行内元素
-行内元素不会独占页面的一行,只会占自身的大小
-行内元素在页面中自左向右水平排列,如果一行之中不能容纳下所有的行内元素
则元素会换到第二行据徐自左向右排列(书写习惯一致)
-行内元素的没人狂赌和高度都是被内容撑开
-->
<div class="box1"> 我是div1</div>
<div class="box2">我是div2</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
/*
内容区(content):元素中的所有的子元素和文本内容都在内容去中排列
内容区的大小由width和 height两个属性来设置
width 设置内容区的宽度
height 设置内容区的高度
*/
width: 200px;
height: 200px;
background-color: yellow;
/*
边框(border),边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部
边框的大小会影响到整个盒子的大小
要设置边框,需要至少设置三个样式;
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
solid 实线
*/
border-width: 10px;
border-color: #bfa;
border-style: solid;
}
</style>
</head>
<body>
<!--
盒子模型(box model)也叫盒模型,框模型
-css将页面中的所有元素都设置为一个矩形的盒子
-将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置
-每一个盒子都由以下几个部分组成:
-内容区(content)
-内边距(padding)
-边框(border)
外边距(margin)
-->
<div class="box1"></div>
</body>
</html>
盒子模型_边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
边框
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
*/
/* border-width 可以省略不写
默认值:一般都是3个像素
border-width可以用来指定四个方向的边框的宽度
值的情况
四个值: 上 右 下 左
三个值: 上 左右 下
两个值: 上下 左右
一个值: 上下左右
除了birder-width 还有一组 border-xxx-width
xxx可以是 top right bottom left
用来单独指定某一个边的宽度
*/
/* border-width: 10px; */
/* border-right-width: 10px; */
/* border-left-width: 10px; */
color:red;
/*
border-color用来指定边框的颜色,同样可以分别指定四个边的边框
规则和border-width 一样
border-color也可以省略不写,如果省略了自动使用color的颜色值(color的默认值是黑色)
也有border-xxx-color,规则同border-xxx-width
*/
/* border-color: orange red yellow green;
border-color: orange; */
/*
border-style 指定边框的样式
默认值是none 表示没有边框
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
也有border-xxx-style,规则同border-xxx-width
*/
/* border-style: solid dotted dashed double; */
/* border-width: 10px;
border-color: orange;
border-style: solid; */
/*
border简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求
除了border以外还有四个 border-xxx
border-top
borderr-right
border-bottom
border-left
*/
/* border:solid 10px orange; */
/* border-top: 10px solid red;
border-left: 10px solid red;
border-bottom: 10px solid red; */
/* 设置四个边框不想要的去掉 */
border: 10px red solid;
border-right:none;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
盒子模型_内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
/*
内边距(padding)
-内容区和边框之间的距离是内边距
-一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
-内边距的设置会影响到盒子的大小
-背景颜色会延伸到内边距上
一个盒子的可见框的大小,由 内容区 内边距 和 边框 共同决定
所以在计算盒子的大小时,需要将这三个区域加到一起计算
*/
/* padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 100px; */
/*
内边距padding 的简写属性:可以同时指定四个方向的内边距
规则和border-width 一样
*/
padding: 10px 20px 30px 40px;
}
.inner{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner"></div>
</div>
</body>
</html>
盒子模型_外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px red solid;
/*
外边距(margin)
-外边距不会影响盒子的可见框的大小
-但是外边距会影响盒子的位置
-一共有四个方向的外边距
margin-top
-上外边距,设置一个正值,元素会向下移动
margin-right
-右外边距,默认情况下设置margin-right不会产生任何效果
margin-bottom
-下外边距,设置一个正值,其下的元素会向下移动
margin-left
-左外边距,设置一个正值,元素会向右移动
-margin也可以设置负值如果是负值则元素会向相反的
-元素在页面中是按照自左向右的顺序排列的,
所以默认情况下如果我们设置的左和上外边距则将会移动元素的自身
而设置下和右外边距会移动其他元素
-margin的简写属性
margin 可以同时设置四个方向的外边距,用法和padding一样
-margin会影响到盒子实际占用空间的大小
*/
/* margin-top: 100px;
margin-left: 100px; */
/* margin-bottom: 100px; */
/* margin-top: -100px; */
/* margin-left: -100px; */
/* margin-bottom: -100px; */
/* margin-right: 0px; */
margin: 100px;
}
.box2{
width: 220px;
height: 220px;
background-color: royalblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
盒子模型的水平布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
width: 800px;
height: 200px;
border: 10px red solid ;
}
.inner{
height: 200px;
background-color: #bfa;
/*
元素的水平方向的布局:
元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中,水平布局必须要满足以下的等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
左外边距 + 左边框 + 左内边距 + 宽度 + 右内边距 + 右边框 + 右外边距 = 其父元素内容区的宽度
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
-以上等式必须满足,如果相加结果使等式不成立,则称为 过度约束,则等式会自动调整
-调整的情况:
-如果这七个值中没有auto的情况,则浏览器会自动调整margin-right值,以使等式满足
-这七个值中有三个值可设置为auto,width的默认值为auto,其他值默认值为0.
width
margin-right
margin-right
-如果某个值为auto,则会自动调整 为auto 的那个值 以使等式成立
-如style中 width:suto;
等式变为:0 + 0 + 0 + 800 + 0 + 0 + 0 = 800
-如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0.
-如果将三个值都设置为auto,则外边距都是0,宽度最大
-如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值
auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
示例:
width:xxxpx;
margin:0 auto;
*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
垂直方向的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
background-color: #bfa;
/*
默认情况下父元素的高度被内容撑开
设置高度后高度固定
*/
height: 600px;
}
.inner{
height: 100px;
width: 100px;
background-color: yellow;
margin-bottom: 200px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
子元素是在父元素的内容区中排列的,
如果子元素的大小超过了父元素,则子元素会从父元素中溢出
使用 overflow 属性来设置父元素如何处理溢出的子元素
可选值:
visible,默认值 子元素会从父元素溢出,在父元素外部的位置显示
hidden 溢出的内容会被裁剪不会显示
scroll 生产两个滚动条,通过滚动条来查看完整的内容
auto 根据需要生产滚动条
*/
overflow: auto;
}
.box2{
width: 100px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<!-- <div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div> -->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
外边距的折叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1,.box2{
width: 200px;
height: 200px;
font-size: 100px;
}
/*
垂直外边距的重叠(折叠)
-相邻的垂直方向外边距会发生重叠现象
-兄弟元素
-兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)
-特殊情况:
如果相邻的外边距一正一负,则取两者的和
如果相邻的外边距都是负值,则取两者中绝对值较大的
-兄弟元素之间的外边距的重叠,对于开发是有利的,所以我们不需要进行处理
-父子元素:
-父子元素间相邻外边距,子元素会传递给父元素(上外边距)
-父子外边距的折叠会影响到页面的布局,必须要进行处理
*/
.box1{
background-color: #bfa;
/* 设置一个下外边距 */
margin-bottom: 100px;
}
.box2{
background-color: orange ;
/* 设置一个上外边距 */
margin-top: 100px;
}
.box3{
width: 200px;
height: 200px;
background-color: #bfa;
/* padding-top: 100px; */
border-top: 1px red solid;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
行内元素的盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
background-color: orange;
/*
行内元素的盒模型
-行内元素不支持设置宽度和高度
-行内元素可以设置padding,但是垂直方向的padding不会影响页面的布局
-行内元素可以设置border,垂直方向的border不会影响页面的布局
-行内元素可以设置margin,垂直方向的margin不会影响布局
*/
/* width: 200px;
height: 200px; */
/* padding: 100px; */
/* border: 100px solid red; */
margin: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
a{
/*
dispaly 用来设置元素显示的类型
可选值:
inline 将元素设置行内元素
black 将元素设置为块元素
inline-black 将元素设置为行内块元素
行内块,既可以设置宽度和高度又不会独占一行
table 将元素设置为表格
none 元素不在页面中显示
visibility 用来设置元素的显示状态
可选值:
visible 默认值,元素在页面中正常显示
hidden 元素在页面中隐藏,不显示,但是依然占据页面中的位置
*/
display: block;
visibility: visible;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<a href="javascript">超链接</a>
<a href="javascript">超链接</a>
<span class="s1">我是span</span>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
默认样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./css/reset.css"> -->
<link rel="stylesheet" href="./css/normalize.css">
<!--
重置样式表:专门用来对浏览器的样式进行重置的
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一
-->
<style>
/*
默认样式
-通常情况下,浏览器都会为元素设置一些默认样式
-默认样式的存在会影响到页面的布局,
通常情况下编写网页时必须要去除浏览器的默认样式(PC端的页面)
*/
/* body{
margin:0px;
}
p{
margin: 0px;
}
ul{
margin: 0px;
padding:0px;
/* 去除项目符号 */
/* list-style: none;
margin-left: 20px;
} */
/* *{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
} */
.box1{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
轮廓和圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/* box-shadow 用来设置元素的阴影效果,阴影不会影响页面的布局
第一个值 左侧偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
第三值 阴影的模糊半径
第四值 阴影的颜色
*/
box-shadow: 20px 20px 10px rgb(0, 0, 0,.3) ;
/*
outline 用来设置元素的轮廓线,用和border一样
轮廓和边框不同的点,就是轮廓不会影响到可见框的大小
*/
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
/* border-radius:用来设置圆角 圆角设置的圆的半径大小*/
/* border-top-left-radius */
/* border-top-right-radius */
/* border-bottom--radius */
/* border-bottomr-right-radius*/
border-top-left-radius: 50px;
}
.box:hover{
outline: 10px red solid;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<span>hello</span>
</body>
</html>
76
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
