位置分类
嵌入式样式表： 写在标签内部，以属性的形式存在。如下面的 div 中 span 内的 style。
内部样式表： 写在html文档自己中的样式。
外部样式表： 将样式写在专门的文件里，在html中导入。用< link rel=“stylesheet” href=“路径（.css文件）”>
<html>
<head>
<title>Daqin empire</title>
<meta charset="UTF-8">
<style type="text/css">
/*被 style 标签包围的范围是 css 环境，可以写css代码*/
/*标签样式表，body中所有该标签的内容都使用下面的样式*/
p{
color:blue;
}
/*.:类样式表，body中可以引用这个样式*/
.f20{
font-size:20px;
}
/*#:ID样式，body中可以引用这个样式*/
#background{
background-color:pink;
font-size:20px;
font-weight:bolder;
font-style:italic;
font-family:"仿宋";
}
/*组合样式*/
div p{
color:purple;
}
div .f25{
font-size:25px;
font-family:"仿宋";
}
</style>
</head>
<body>
Welcome to Daqin empire!<br/>
<img src="imgs/ssm.jpg" width="250" height="450" title="少司命!" alt="图片错了哦~"/>
<h3>九歌 少司命</h3>
<p>秋兰兮糜芜，罗生兮堂下。</p>
<p>绿叶兮素华，芳菲菲兮袭予。</p>
<p>夫人自有兮美子，荪何㠯兮愁苦？</p>
<p>秋兰兮青青，绿叶兮紫茎。</p>
<p>满堂兮美人，忽独与余兮目成。</p>
<p class="f20">入不言兮出不辞，乘回风兮载云旗。</p>
<p id="background">悲莫悲兮生别离，乐莫乐兮新相知。</p>
<p>荷衣兮蕙带，儵而来兮忽而逝。</p>
<p>夕宿兮帝郊，君谁须兮云之际？</p>
<p>与女沐兮咸池，晞女发兮阳之阿。</p>
<p>望美人兮未来，临风怳兮浩歌。</p>
<p>孔盖兮翠旍，登九天兮抚彗星。</p>
<p>竦长剑兮拥幼艾，荪独宜兮为民正。</p>
<div>
<p><span style="font-size:30px;font-weight:bolder;color:yellow;">啾咪</span></p>
<span class="f25">啾咪</span>
<p class="f25">啾咪</p>
</div>
<br/><a href="https://www.bilibili.com" target="_blank">哔哩哔哩！</a>
</body>
</html>
盒子模型
CSS将页面中的所有元素都设置为一个矩形的盒子，对页面的布局就是将不同的盒子摆放到不同的位置
- 盒子的组成部分
内容区： content
元素中的所有子元素和文本内容都在内容区中排列
内容区的大小由 width 和 height 两个属性来设置
边框： border
边框属于盒子边缘，边框里面属于盒子内部，外面属于盒子外部
边框的大小会影响整个盒子的大小
设置边框至少需要三个样式：
- 宽度 border-width
- 颜色 border-color
- 样式 border-style solid 直线；dotted 点状虚线；dashed 虚线；double 双线
间距（外边距）： margin
外边距影响盒子位置和实际占用空间的大小，具体看视频。
填充（内边距）： padding
内边距的设置会影响盒子的大小，背景颜色也会延伸到内边距上。
一个盒子的可见框的大小由内容区、内边距和边框共同决定，计算盒子大小时要将这三部分都加上。
p{
font-size: 15px;
font-style: italic;
}
p::first-letter{
font-size: 20px;
color: rgb(54, 46, 199);
}
.box{
width: 200px;
height: 200px;
background-color: aqua;
border-width: 5px; /* 默认值3px， 可以指定四个方向的边框宽度 */
/*
四个值：上-右-下-左
三个值：上-左右-下
两个值：上下-左右
一个值：上下左右
指定四条边的颜色、样式的规则同上
*/
border-color: skyblue;
border-style: solid;
/* 简写属性
border: 5px skyblue solid;
*/
/* padding的简写属性规则与border相同 */
padding: 20px;
margin: 100px;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="kirlant">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>learn</title>
<link rel="shortcut icon" href="../imgs/kirlant_logo.jpg" />
<link rel="stylesheet" href="learn.css" />
</head>
<body>
<div class="box">
<p>I have fought the good fight. I've run my distance. I have kept the faith.</p>
<p>From now on the crown of righteousness is reserved for you.</p>
</div>
</body>
</html>
布局
水平方向
一个元素在其父元素中，水平布局必须满足：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度
其中 width、margin-left、margin-right 可以设置为aoto，浏览器会自动调整它们的值以符合上述等式。
备注：
- 将 width 和 margin-left、margin-right 中的一个设置为 auto，则宽度调整到最大，设置为auto的margin为0；
- 将三个值都设置为 auto，则外边距都是 0，宽度最大；
- 将两个 margin 设置为 auto，width 为固定值，则两个 margin 相同，平分剩余的宽度，因此：常用的水平居中方式
width: xxx px;
magin: 0 auto;
.outer{
width: 800px;
height: 200px;
border: 10px skyblue solid;
}
.inner{
width: 200px;
height: 180px;
background-color: honeydew;
border:10px aquamarine solid;
margin-left: 290px;
margin-right: 290px;
}
<body>
<div class="outer">
<div class="inner">
<p>I have fought the good fight. I've run my distance. I have kept the faith.</p>
</div>
</div>
<p>From now on the crown of righteousness is reserved for you.</p>
</body>
垂直方向
父元素的高度默认被子元素撑开，也可以自己设置。
如果设置了父元素的高度，并且子元素的高度超过父元素的高度，那么会出现溢出，此时可以用 overflow 属性设置父元素的处理方式。（还有overflow-x、overflow-y可以单独设置每个方向）
overflow：
- visible：子元素区域溢出，超出父元素
- hidden：隐藏子元素超出的部分，不给显示
- scroll：出现垂直和水平两个方向的滚动条，来查看完整的内容
- auto：根据需要生成滚动条，来查看完整的内容
.outer{
width: 300px;
height: 100px;
border: 10px skyblue solid;
overflow-y: auto;
}
.inner{
width: 200px;
height: 200px;
background-color: honeydew;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
<div class="outer">
<div class="inner">
<p>I have fought the good fight. I've run my distance. I have kept the faith.</p>
<p>From now on the crown of righteousness is reserved for you.</p>
</div>
</div>
外边距的折叠
垂直方向的相邻外边距会发生重叠现象。
- 兄弟元素：
都是正值，垂直外边距取二者间的较大值；
一正一负，取二者的和；
都是负值，取绝对值较大的那个。
.first,.second{
width: 200px;
height: 200px;
padding: 20px;
}
.first{
background-color: skyblue;
margin-bottom: 40px;
}
.second{
background-color: honeydew;
margin-top: 40px;
}
<div class="first">
<p>I have fought the good fight. I've run my distance. I have kept the faith.</p>
</div>
<div class="second">
<p>From now on the crown of righteousness is reserved for you.</p>
</div>
- 父子元素：
子元素的上外边距会传递给父元素；
父子外边距的折叠会影响页面的布局，必须进行处理。
.first{
width: 400px;
height: 300px;
background-color: skyblue;
padding-top: 100px;
}
.second{
width: 200px;
height: 200px;
background-color: honeydew;
}
<div class="first">
<div class="second">
<p>I have fought the good fight. I've run my distance. I have kept the faith.</p>
<p>From now on the crown of righteousness is reserved for you.</p>
</div>
</div>
行内元素的盒子模型
- 行内元素不支持设置宽度和高度，其宽、高由内容决定；
- 可以设置padding，但垂直方向的padding不会影响页面的布局；
- 可以设置border，但垂直方向的border不会影响页面的布局；
- 可以设置margin，但垂直方向的margin不会影响页面的布局，且水平方向的margin不会合并；
.s{
background-color: rgb(153, 192, 246);
padding: 20px;
margin: 50px;
border: 10px rgb(48, 180, 232) solid;
}
.box{
width: 160px;
height: 160px;
background-color: honeydew;
padding: 20px;
}
<body>
<span class="s"> there is the first span. </span>
<span class="s"> there is the second span. </span>
<div class="box">
I have fought the good fight. I've run my distance. I have kept the faith.From now on the crown of righteousness is reserved for you.
</div>
</body>
display属性：用来设置元素显示的类型
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素，宽、高可以设置，不会独占一行；有二者的缺点，尽量避免使用
table 将元素设置为表格
none 元素不在页面中显示，不占页面中的位置
visibility属性：设置元素的显示状态
visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏，不显示，占据页面中的位置
a{
display: block;
width: 100px;
height: 100px;
background-color: rgb(176, 213, 245);
}
<body>
<a href="https://www.bilibili.com">bilibili</a>
<div class="box">
I have fought the good fight. I've run my distance. I have kept the faith.From now on the crown of righteousness is reserved for you.
</div>
</body>
盒子的大小
默认情况下，一个盒子的可见框的大小由内容区、内边距和边框共同决定
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px rgb(155, 218, 245) solid;
}
box-sizing ：设置盒子尺寸的计算方式，也就是设置 width 和 height 的作用
- content-box：默认值， width 和 height 设置的是内容区的大小
- border-box：width 和 height 设置整个盒子的可见区域的大小，此时设置 border 和 padding 会减小内容区的大小。
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px rgb(155, 218, 245) solid;
box-sizing: border-box;
}
轮廓阴影和圆角
outline：设置元素的轮廓线，而不影响可见框的大小
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box1:hover{
outline: 10px rgb(155, 218, 245) solid;
}
一般用于鼠标点击目标元素上面时显示一个框框。
box-shadow：设置元素的阴影效果。三个参数：
- 水平偏移量，正右负左
- 垂直偏移量，正下负上
- 模糊半径，越大越模糊
- 颜色
box-shadow: 10px 10px 10px skyblue;
border-top-left-radius：设置矩形圆角效果，参数是圆角的半径大小。
- 一个参数：左上右上右下左下
- 两个参数：左上右下、右上左下
- 三个参数：左上、右上左下、右下
- 四个参数：左上、右上、右下、左下
也可以用 border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 这四个属性单独设置，一个参数时是正圆，两个参数时是椭圆，第一个是水平方向半径，第二个是垂直方向半径。。
border-radius: 10px;
将元素设置为圆形可以用
border-radius: 50%;
浮动
通过浮动可以设置一个元素向其左侧或右侧移动。
float：设置元素的浮动
- none 默认值
- left 元素向左浮动
- right 元素向右浮动
备注：
元素设置浮动以后，水平布局的等式不需要强制成立；
元素设置浮动以后，会完全从文档流中脱离，不再占据文档流中的位置，所以元素下面的还在文档流中的元素会自动向上移动；
浮动可以使元素水平排列；
浮动元素默认不会从父元素中移除；
浮动元素向左或向右移动时，不会超过其他的浮动元素；
如果浮动元素上面时一个没有浮动的块元素，那么它无法上移；
浮动元素会根据父元素的宽度能否容纳自己而“自动换行”；
浮动元素的高度不会超过它前面浮动的兄弟元素；
浮动元素不会盖住文字，文字会自动环绕在浮动元素周围 --> 设置文字环绕图片的效果；
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
float:left;
}
.box2{
width: 200px;
height: 200px;
background-color: skyblue;
float:left;
}
元素脱离文档流后的特点
- 块元素不再独占一行
- 默认宽度和高度都由内容决定
- 行内元素会变成块元素，特点和块元素相同
扫一扫
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
