【JavaWeb学习】CSS（样式和布局）

位置分类

嵌入式样式表： 写在标签内部，以属性的形式存在。如下面的 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;
}

元素脱离文档流后的特点

块元素不再独占一行
默认宽度和高度都由内容决定
行内元素会变成块元素，特点和块元素相同