一：基础选择器
* （统配选择器）：HTML，body，body下用于显示的标签 div （标签选择器）：该标签名对应的所有该标签 . (class选择器)（eg: .div => class="div"）：类名为div的所有标签 # （id 选择器）（eg：#div => id="div"）：id 名为div的唯一标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/*在实际开发中, 尽量少用或不用标签名来作为选择器*/
/*标签名作为选择器一般在该标签为最内层(语义|功能)标签*/
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<link rel="stylesheet" href="css/1.css">
<!--总结: 内联和外联, 相同属性采用下者覆盖上者, 不同属性叠加-->
<style>
/*在css语法中如何来表示class名 => .就代表class*/
.div1 {
background-color: cyan;
}
.div2 {
background-color: brown;
}
/*问题:css中用什么标识id => #*/
#did1 {
background-color: tan;
}
</style>
<style>
* {
background-color: yellow;
}
/*html和body颜色被改变了, 但所有的div颜色并没有改变
原因: 不同的名字(选择器)具有优先级*/
</style>
</head>
<body>
<div>1</div>
<div style="background-color: pink">2</div>
<!--总结: 行间式属于逻辑最下方, 相同的属性一定会覆盖内联和外联-->
<div class="div1">3</div>
<!--问题: 不使用行间式单独操作(可读性差), 那又如何来单独改变其颜色 => 起别名-->
<div class="div2"></div>
<!--总结: 用class起名, 分类别, 可以重名 => 用什么方式唯一标识一个标签-->
<div id="did1"></div>
<!--给该标签设置唯一标识符 id-->
<!--了解: 统配选择器 => css符合 => * -->
<!--控制着: html body 及 body下所有用来显示的标签-->
</body>
</html>
选择器示例
二：选择器优先级
理解：控制范围越精确，优先级越高，所设置的样式就会覆盖优先级低的相同属性样式 结论： 优先级顺序：统配<标签<class<id<行间式<!important
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器优先级</title>
<style>
#div {
background-color: yellow;
}
.div {
background-color: yellowgreen;
}
div {
background-color: green!important;
}
* {
width: 100px;
height: 100px;
background-color: darkgreen;
}
/*!important 优先级要强于行间式, 在属性值与;之间设定*/
</style>
</head>
<body>
<div class="div" id="div" style="background-color: red"></div>
<!--总结: 行间式优先级要高于内连外连所有选择器的优先级, 但是不能高于!important-->
</body>
</html>
选择器优先级示例
三：长度和颜色
长度单位：px mm cm em rem vm vh in “”“ 颜色设置方式： 1.颜色单词 2.#000000~#FFFFFF（#abc == #AABBCC）如果是AABBCC的话可以缩写成ABC 3.rgb（0~255,0~255,0~255） | rgba（0~255,0~255,0~255,0~255,0~1）最后的a(0~1)表示的是透明度，rgb表示的是颜色 ”“”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>长度与颜色</title>
<style>
.div {
/*px mm cm em rem vw vh in*/
width: 10in;
height: 100px;
background-color: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
示例
四：显示方式display
display：what：控制标签在页面中的显示方式的属性why：通过设置该属性的不同属性值，使其在页面中的显示方式达到设定的效果，且对于CSS的样式支持程度也不一样 display： inline ; 1.同行显示 2.只支持部分CSS样式（不支持宽高） 3.宽高由文本内容撑开 display：block ; 1.异行显示 2.支持所有CSS样式 3.设置了宽高就采用设置的值，宽高也就有默认的特性 display：inline-block; 1.同行显示 2.支持所有的CSS样式 3.设置了宽高就采用设置的值 总结：标签的显示方式就是用display属性控制1.带有inline的就会同行显示，带有block的就会支持所有CSS样式2.带有inline的都是与内容相关的标签，带有block的主要用来搭建架构的 嵌套关系：页面架构就是由标签一层层嵌套关系形成的嵌套关系有一定的规则：1.inline-block类型不建议嵌套任意标签，所以系统的inline-block都设计成了单标签2.inline类型只嵌套inline类型的标签3.block类型可以嵌套任意类型标签（注：hn和p只建议嵌套inline类型标签） 结论：1.inline嵌套block和inline-block，不起任何作用，所以只能嵌套inline2.inline-block可以嵌套其他类型标签，但一定要结合vertical-align属性操作，左右还有一空格间距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
span {
width: 200px;
height: 50px;
background-color: yellow;
}
p {
width: 200px;
height: 50px;
background-color: red;
}
img {
width: 200px;
/*height: 50px;*/
}
</style>
</head>
<body>
<span>123<i>456</i><b>789</b></span>
<span>123<i>456</i><b>789</b></span>
<p>123<i>456</i><b>789</b></p>
<p>123<i>456</i><b>789</b></p>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt="">
<hr>
<!--
通过display属性值进行划分
-->
<style>
Grace {
color: blueviolet;
width: 200px;
height: 50px;
background-color: red;
}
.o1 {
display: inline;
}
.o2 {
display: block;
}
.o3 {
display: inline-block;
}
</style>
<Grace class="o1">123</Grace>
<Grace class="o1">123</Grace>
<hr>
<Grace class="o2">123</Grace>
<Grace class="o2">123</Grace>
<hr>
<Grace class="o3">123</Grace>
<Grace class="o3">123</Grace>
<hr>
<style>
.div {
width: 100px;
height: 100px;
background-color: orange;
display: inline-block;
}
/*标签的显示方式就是用display属性控制*/
</style>
<div class="div">000</div>
<div class="div">111</div>
</body>
</html>
标签分类之display
五：盒模型
盒模型由四部分组成：margin + border + padding + content 1.margin：外边距，控制盒子的位置（布局），通过左和上控制自身位置，通过右和下影响兄弟盒子的位置（划区域） 2.border：边框，样式/宽度/颜色（solid表示实线，dashed表示虚线，dotted表示点状线） 3.padding：内边距，从显示角度控制文本的显示区域 4.content：内容区域，由宽 X 高组成 注意： 1.margin，padding：起始为上，顺时针依次赋值，不足边时去对边 2.要做到文本内移，设置padding，如果又想显示区域不变，相应减少content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style>
body {
margin: 0;
}
/*margin | border | padding | content(width x height)*/
.box {
width: 200px;
height: 200px;
background-color: orange;
/*padding: 10px 10px 10px 10px;*/
/*padding: 20px 30px;*/
/*起始为上, 顺时针依次赋值, 不足边取对边*/
/*border-style: solid;*/
/*border-width: 10px;*/
/*border-color: red;*/
/*transparent透明色*/
border: blue dashed 20px;
/*margin: 100px 50px;*/
/*起始为上, 顺时针依次赋值, 不足边取对边*/
}
.box {
padding: 10px 0 0 10px;
width: 190px;
height: 190px;
/*margin-left: -80px;*/
/*margin-top: -80px;*/
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="box">123</div>
<div>456</div>
</body>
</html>
盒模型
六：盒模型布局
1.上下两个盒子的margin-bottom和margin-top功能相同，同时出现，取大值 2.第一个有显示区域的子级会和父级联动（margin-top重叠），取大值 解决方案： 1.父级设置border-top 2.父级设置padding-top
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型布局</title>
<style>
div {
width: 78px;
height: 33px;
background-color: orange;
border: 1px solid black;
}
/*前提: 盒子显示区域 80 x 35*/
.d1 {}
.d2 {
margin-left: 80px;
margin-top: -35px;
/*margin-bottom: 35px;*/
}
.d3 {
margin-left: calc(80px * 2);
margin-top: -35px;
}
.d4 {
margin-left: calc(80px * 3);
margin-top: -35px;
}
.d5 {
margin-left: calc(80px * 4);
margin-top: -35px;
}
.d6 {
margin-left: calc(80px * 5);
margin-top: -35px;
}
.d7 {
margin-left: calc(80px * 6);
margin-top: -35px;
}
</style>
</head>
<body>
<!--.d${$}*7-->
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
<div class="d7">7</div>
<hr>
<!--需求: b1 与 b2 上下间接50px-->
<style>
.b1 {
margin-bottom: 50px;
}
.b2 {
margin-top: 50px;
}
/*总结: 上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值*/
</style>
<div class="b1"></div>
<div class="b2"></div>
<!--了解: 左右正常叠加-->
<style>
.s1 {
margin-right: 10px;
}
.s2 {
margin-left: 10px;
}
</style>
<span class="s1">1</span><span class="s2">2</span>
<hr>
<style>
.sup {
width: 200px;
height: 200px;
background-color: orange;
/*margin-top: 40px;*/
/*border-top: 1px solid black;*/
padding-top: 10px;
}
.sub1 {
/*border: 1px solid red;*/
width: 50px;
height: 50px;
background-color: red;
margin-top: 50px;
}
.sub2 {
width: 50px;
height: 50px;
background-color: pink;
margin-top: 50px;
}
/*总结: 第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值*/
/*解决方案: 1.父级设置border-top | 2.父级设置padding-top*/
</style>
<section class="sup">
<section class="sub1"></section>
<section class="sub2"></section>
</section>
</body>
</html>
盒模型布局
原文地址：https://www.cnblogs.com/liuxiaolu/p/10278922.html
时间： 2024-11-08 12:07:44