CSS笔记

已于 2022-11-15 12:51:37 修改
阅读量763 收藏
点赞数
分类专栏： CSS 文章标签： css 前端 vscode 学习
于 2022-11-04 12:36:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clownwithoutmask/article/details/127629163
版权

选择器

作用：选择页面上的某一个或则某一类标签

2.1基本选择器

<1>标签选择器（TAG选择器）
标签名{}

<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
会选择这个页面所有的这个标签的元素
*/
h1{color:#FFA500;}
p{color:aqua;}
</style>
</head>
<body>
<h1>hello world</h1>
<p>11111</p>
<p>22222</p>
<p>33333</p>
</body>
</html>

使用的场景：

  • 去掉某些标签的默认样式
  • 复杂的选择器中，如：层次选择器

<2>类选择器
class名称{}

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style
type="text/css">
/*
类选择器可以多个标签归类，同一个class可以实现复用，也可以跨标签使用
*/
.one{color:chartreuse;font-size:20px;}
</style>
</head>
<body>
<h1 class="one">hello world</h1>
<pclass="one">11111</p>
<pclass="one">22222</p>
<p>33333</p>
</body>
</html>

<3>id选择器
id名称{}

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
id选择器:必须保证全局唯一，不能出现同名的
*/
#one{color:#FFA500;}
#two{color:aquamarine;}
</style>
</head>
<body>
<h1 id="one">hello world</h1>
<p>11111</p>
<p id="two">22222</p>
<p>33333</p>
</body>
</html>

<4>三种基本选择器的优先级
id选择器>类选择器>标签选择器
<5>群组（分组）选择器
可以通过逗号的方式给不同的选择器添加统一的CSS样式，来达到代码的复用。

<html>
    <head>
        <title></title>
        <style>
div,p,h1{background-color: red;}
        </style>
    </head>
    <body>
        <div>你好</div>
        <p>你好</p>
        <h1>你好</h1>
    </body>
</html>

<6>通配选择器
*{ }div，h1,p …{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式
使用场景：去掉所有标签的默认样式

<html>
    <head>
        <title></title>
        <style>
*{ border: 1px red solid;}
        </style>
    </head>
    <body>
        <div>你好</div>
        <p>你好</p>
        <h1>你好</h1>
    </body>
</html>

2.2层次选择器

wu

1. 后代选择器：

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
  <style>
type="text/css">
/*后代选择器中间有一个空格*/
/*选中ul下的所有p标签*/
ul p{background:green;}
  </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
     <p>p4</p>
  </li>
  <li>
     <p>p5</p>
  </li>
  <li>
     <p>p6</p>
  </li>
</ul>
</body>
</html>

2. 子代选择器

<! DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<title></title>
       <style>
type="text/css">
/*子代选择器中间是一个>符号，只能选中下一代*/
/*选中body子代的p标签*/
body>p{background:green;}
       </style>
  </head>
  <body>
       <p>p1</p>
       <p>p2</p>
       <p>p3</p>
<ul>
  <li>
   <p>p4</p>
  </li>
  <li>
   <p>p5</p>
  </li>
  <li>
   <p>p6</p>
  </li>
</ul>
     </body>
</html>

3. 相邻选择器

<! DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style type="text/css"> 
        
/*相邻选择器：对下不对上*/
#one+p{ background:aqua; }
   </style>
      </head>
  <body>
      <p>p1</p>
      <p id="one">p2</p>
      <p>p3</p>
<ul>
   <li>
      <p>p4</p>
   </li>
   <li>
      <p>p5</p>
   </li>
   <li>
      <p>p6</p>
   </li>
</ul>
      <p>p7</p>
</body>
</html>

4. 兄弟选择器

<! DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
      <style type="text/css">
/*兄弟选择器:当前选中元素向下的所有兄弟元素*/
        #one~p{background:aqua;}
      </style>
     </head>
   <body>
      <p>p1</p>
      <p id="one">p2</p>
      <p>p3</p>
      <p>p3.5</p>
<ul>
   <li>
      <p>p4</p>
   </li>
   <li>
      <p>p5</p>
   </li>
   <li>
      <p>p6</p>
   </li>
</ul>
      <p>p7</p>
      <p>p8</p>
</body>
</html>

2.3结构伪类选择器

CSS伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。
M：伪类{ }

  • ：link 访问前的样式（只能添加给a标签）
  • ：visited 访问后的样式（只能添加给a标签）
  • : hover 鼠标移入时的样式（可以添加给所有标签）
  • : active鼠标按下时的样式（可以添加给所有标签）
    使用有顺序：L V H A
<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style type="text/css"> 
     div{width: 200;height: 200px;background-color: red;}
     div:hover{background-color: blue;}
     div:active{background-color: green;}
   </style>
      </head>
  <body>
    <div></div>
</body>
</html>

:after :before(通过伪类的方式给元素添加一些文本内容，使用content属性)

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style type="text/css">     
   div:after{content:"world" ; color=red;}
   /* div:before{content:"world" ;}*/
   </style>
      </head>
  <body>
<div>hello</div>
</body>
</html>

:checked ，:disabled, :focus

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style type="text/css"> 
  input:checked{width: 100px;height: 100px;}
  :focus{width: 100px;height: 100px;}
   </style>
      </head>
  <body>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">
<input type="text">
</body>
</html>



<! DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
      <title></title>
      <style type="text/css">
/*不能使用class和id选择器*/
/*选中ul下的第一个子标签*/
      ul  li:first-child{
      background:#00FFFF;
      }
/*选中ul下的最后一个子标签*/
      ul li:last-child{
      background:#FF0000;
      }
/*高级的结构伪类选择器，不需要掌握，要个脸熟*/
/*选中p1:先定位到父级元素，选中父级元素下的第一个孩子顺序并且是当前元素才能*/
    p:nth-child(2){
     background:
     #b9e2fe;
    }
/*选中父元素下的第二个类型*/
    p:nth-of-type(1){
     background:
     #FFA500;
     }
      </style>
</head>
<body>
   <h1>hello</h1>
      <p>p1</p>
      <p>p2</p>
      <p>p3</p>
<ul>
   <li>li1</li>
   <li>li2</li>
   <li>li3</li>
</ul>
</body>
</html>
  • ：nth-of-type()，：nth-child()
  • ：first-of-type()，:first-child()
  • :last-of-type(),last-child()
  • :only-of-type(),only-child()
<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style type="text/css"> 
  /*li:nth-of-type(n){background-color: red;}
  n为几就代表第几行，偶数：2n...
    li：first-of-type{background-color: red;}第一行
    li :last-of-type{background-color: red;}最后一行
    li:only-of-type{background-color: red;}只有当li为一行时才有效果
    nth-of-type()，：nth-child()区别
    例：li:nth-of-type(2)会选择li的第二项，而不是div
         li：nth-child(2)没有效果，因为第二项是div类型
    */
   </style>
      </head>
  <body>
<ul>
   <li></li>
   <div>aaaaa</div>
   <li></li>
   <li></li>
   <li></li>
</ul>
</body>
</html>

2.4属性选择器（常用）

wu 

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style type="text/css"> 
       div[class*=search] {background-color: red;}
/* 注：若在style标签中没有*它只能选中body中div的第三项
 *=代表着将class中有search的标签全部选中
^=起始匹配，若将代码中的*=改成起始匹配，那么只能选中
<div class="search">bbbb</div> <div class="search-botton">eeee</div>
$=结束匹配（参照起始匹配）
[] []组合匹配，满足这两个条件需求的才会被选中*/
   </style>
      </head>
  <body>
    <div>1111</div>
    <div class="A">aaaa</div>
    <div class="search">bbbb</div>
    <div class="search-botton">eeee</div>
     <div class="botton-search"">dddd</div>
</body>
</html>

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.demo a{float:left;display:block;height:50px;width:50px;border-radius:10px;background:#FFA500;text-align:center;color:#b9e2fe;text-decoration:none;margin-right:5px;font:bold 20px/50px Arial;}
/*属性选择器的格式：选中存在id属性 标签[]{}*/
/*a[id]{background:yellow;}*/
/*选中id=first的元素*/
/*a[id=first]{  background:#00FFFF;}*/
/*选中class中含有links的元素*/
/*a[class*="links"]{background:#FF0000;}*/
/*选中以http开的元素*/
/*a[href^=http]{background:#ddff7e;}*/
/*选中以doc结尾的元素*/
a[href$=doc]{ background:#f2fcfe;}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com"
class="links item first"id="first">1</a>
<a href="https://www.4399.com"class="links item active">2</a>
<a href="123.html"class="links item">3</a>
<a href="123.jpg"class="links item">4</a>
<a href="123.png"class="links item">5</a>
<a href="abc"class=" item">6</a>
<a href="a.pdf"class="links item">7</a>
<a href="abc.pdf.class="linksi tem">8</a>
<a href="abc.doc"class="links item">9</a>
<a href="abcd.doc"class="links item last"id="last">10</a>
</p>
</body>
</html>

2.5CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承 （默认是不能继承的，但是可以设置继承属性 值：inherit）

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style type="text/css"> 
 div{width: 200px;height: 200px;border: red;color: red;font-size: 30px;}
 /*所谓文字继承（color: red;font-size: 30px文字相关样式）就是这个样式应该是作用在div上的，但对p标签也具有效果
 布局样式（width: 200px;height: 200px;border: red;color:）则不能被继承*/
 P{ border: inherit;}/*使p标签继承div的边框*/
   </style>
      </head>
  <body>
<div>
   <p>你好</p>
</div>
</body>
</html>

2.6CSS优先级

相同样式的优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
 div{color: red;}
 div{color: blue;}
 /* 当设置相同样式时，后面的优先级较高
    内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高
    如果这里bass颜色为黄色，那么块的颜色为黄色*/
   </style>
   <link rel="stylesheet" href="./bass">
   
      </head>
  <body>
<div>你好</div>
</div>
</body>
</html>

单一样式优先级
style行间>id>class>tag（标签）>*（通配）>继承

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#a{color: red;}
   </style>
      </head>
  <body>
<div id="a" style="color: blue;">你好</div>
</div>
</body>
</html>

注：

  • style 权重1000
  • id 权重100
  • class权重10
  • tag权重1

！important
提升样式优先级，非规范方式，不建议使用
（不能针对继承 ）

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#a{color: blue !important;}
   </style>
      </head>
  <body>
<div id= "a";style="color: red;">你好</div>

</div>
</body>
</html>

标签+类与单类
标签+类>单类

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
p{color: red;}
p,div{color: blue;}
/*效果为蓝色，跟顺序有关，如果将上下位置调换则p标签为红色*/
   </style>
      </head>
  <body>
<div >你好</div>
<p>你好</p>
</div>
</body>
</html>

群组优先级
群组选择器与单一选择器优先级相同，靠后写的优先级高。

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
p{color: red;}
p,div{color: blue;}
/*效果为蓝色与顺序有关，上下调换位置。则p标签效果为红色*/
   </style>
      </head>
  <body>
<div >你好</div>
<p>你好</p>
</div>
</body>
</html>

层次优先级

  1. 权重比较
    ul li .box p imout{}1+1+10+1+1
    .hello span #elem{}10+1+100
  2. 约分比较
    上下约分
    ul li .box p imout{} li p input{}
    .hello span #elem{} #elem{}

3.美化页面

3.1为什么要美化页面?

  • 有效的传递页面信息
  • 吸引用户
  • 凸显网页主题
    -用于 提高体验
    span标签：
    重点要突出的字，用span标签套起来
<! DOCTYPE html>
<html>
     <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        .one{
        font-size:50px;
       }
      </style>
      </head>
<body>
莫等闲，白了少年头，<span class="one">空悲切</span>。
</body>
</html>

3.2字体样式

font-size:字体大小
font-famliy:字体
font-weight:字体粗细
color:字体颜色
font-style:字体风格
italic字体倾斜
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
body{
font-family:楷体;color:#FFA500;
}*/
h1{
color:#FF0000;
font-size:50px;
}
/*.p1{
font-weight:bolder;
}
.p2{
font-weight:bold;
}*/
/*font:字体风格 字体粗细 字体大小 字体*/
/*p{font:italic bolder 15px "楷体";}*/
</style>
</head>
<body>
<h1>迪迦奥特曼</h1>
<p class="p1">迪迦奥特曼，日本圆谷特摄剧《迪迦奥特曼》及其衍生作品中的主角，也是首位拥有形态转化能力的奥特曼。</p>
<p class="p2">不同于其他奥特曼的是，迪迦奥特曼是在地球的超古代时期就已经出现的巨人，但并非是地球出生的奥特曼。他原本是黑暗巨人，也是其中的领袖，后在超古代时期的地球警备队队长幽怜的劝说下弃暗投明，吸收了三个同伴的力量再封印了他们，最终成为光之巨人迪迦奥特曼。</p>
</body>
</html>

3.3文本样式

1. 颜色

color:orange;
a、单词：red green blue pink
b、RGB0-F16进制 #FF0000红色 RGB(255,0,0)
c、RGBA A表示透明度 RGBA(255,0,0,0.5)；

2. 文本对齐方式
text-align:center;居左|居中|居右

3. 首行缩进

text-indent:2em;/*2em表示缩进两个字体*/

4. 行高

height:100px;
line-height:100px;
当你想行内容上下左右都居中，就把块高度和行高设置成一样的

5. 装饰

text-decoration:underline;下划线
text-decoration:line-through;中划线
text-decoration:overline;上划线

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a{
color:red;
text-align:center;
background:orange;
height:100px;
line-height:100px;
text-decoration:underline;
}
.b{
/*color:#FF0000;*/
color:rgb(255,0,0);
text-decoration:line-through;
}
.c{
color:rgba(255,0,0,0.5);
text-decoration:overline;
}
.p1{
text-indent:2em;
/*2em表示缩进两个字体*/
}
</style>
</head>
<body>
<p class="a">11111111</p>
<p class="b">22222222</p>
<p class="c">33333333</p>
<h1>迪迦奥特曼</h1>
<p class="p1">迪迦奥特曼，日本圆谷特摄剧《迪迦奥特曼》及其衍生作品中的主角，也是首位拥有形态
转化能力的奥特曼。</p>
<p class="p2">不同于其他奥特曼的是，迪迦奥特曼是在地球的超古代时期就已经出现的巨人，但并非是地球出生的奥特曼。他原本是黑暗巨人，也是其中的领袖，后在超古代时期的地球警备队队长幽怜的劝说下弃暗投明，吸收了三个同伴的力量再封印了他们，最终成为光之巨人迪迦奥特曼。</p>
</body>
</html>

3.4超伪类连接

a:link设置超链接在未被访问的样式
a:visited设置超链接在已被访问的样式
a:hover设置超链接在鼠标悬浮的样式
a:active设置超链接在鼠标点击的样式
注意：a:hover必须位于a:link和a:visited的后面
      a:active必须位于a：hover后面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration:none;
}
/*没有访问之前的样式*/
a:link{
color:black;
}
/*已被访问的样式*/
a:visited{
color:red;
}
/*鼠标悬浮状态*/
a:hover{
color:orange;
}
a:active{
color:#00FFFF;
}
</style>
</head>
<body>
<p><a href="#">java从入门到放弃</a></p>
<p><a href="#">数据库从删库到跑路</a></p>
<p><a href="#">JS从入门到入土</a></p>
</body>
</html>

3.5阴影

/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration:none;
color:#000000;
}
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
.one{
text-shadow:red 2px -2px 1px;
}
</style>
</head>
<body>
<p> <a href="#">java从入门到放弃</a></p>
<p><a href="#">数据库从删库到跑路</a></p> 
<p class="one"><a href="#">99</a></p>
</body>
</html>

3.6列表样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#nav{
width:300px;
background:#cdcdcd;
}
.title{
font-size:18px;
font-weight:bold;
text-indent:2em;
line-height:30px;
background-color:#FF0000;
}

ul{
background:#cdcdcd;
}
/*list-style：设置列表前的样式
  none去掉圆点
  circle空心圆
  decimal数字
  square正方形
  */
ul li{
height:30px;
list-style:none;
text-indent:1em;
}
a{
text-decoration:none;
font-size:14px;
color:#000000;
}
a:hover{
color:orange;
text-decoration:underline;
}
</style>
</head>
<body>
<div id="nav">
<h2 class="title">分类</h2>
<ul>
<li>
<a href="#">美妆</a>
<a href="#">
饰品</a>
<a href="#">洗护</a>
</li>
<li>
<a href="#">男装</a>
<a href="#">运动</a>
<a href="#">百货</a>
</li>
<li>
<a href="#">手机</a>
<a href="#">数码</a>
<a href="#">电器</a>
</li>
<li>
<a href="#">食品</a>
<a href="#">生鲜</a>
<a href="#">医药</a>
</li>
</ul>
</div>
</body>
</html>

3.7背景

background-repeat

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:800px;
height:600px;
border:10px
solidred;
background-image:url(img/44.png);
/*图片默认平铺*/
}
.div1{
background-repeat:repeat-x;/*水平平铺*/
}
.div2{
background-repeat:repeat-y;/*垂直平铺*/
}
.div3{
background-repeat:no-repeat;/*不平铺*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
</div>
</body>
</html>

4.盒子模型

  1. 布局必须遵循一个规范（盒子模型）
  2. 页面上所有的内容都是HTML标签组成的，每一个标签都有自己的特点
  3. HTML里的标签可以分为三类：块级元素 行内元素 行内块元素

4.1什么盒子模型？

五 

       margin :外边距（盒子与盒子间的距离 ）
       border：边框
       padding：内边距
       content：物品（内容区域，由width和height组成的）
       注： 1. 背景颜色会填充到margin以内的区域，不包括margin
            2.文字会在content区域
            3.padding不能出现负值，margin可以

box-sizing
盒子尺寸，可以改变盒子模型展示形态
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值)|boeder-box.
使用场景：

           1. 不用再去计算一些值
           2.  解决一些100%的问题

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#box{height: 200px;width: 200px;background-color: red;border: 10px blue solid;
padding: 30px 50;
box-sizing: border-box;
}   
   </style>
      </head>
  <body>
<div id="box">你好</div>

</div>
</body>
</html>

margin叠加

当给两个盒子同时添加上下外边距的时候，就会出现叠加的      问题。这个问题，只有上下有，左右是没有这个叠加问题的，    出现在上下margin同时存在的时候，会取上下值较大的作为叠    加的值。

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#box1{height: 200px;width: 200px;background-color: red;margin-bottom: 30px;}
#box2{height: 200px;width: 200px;background-color: blue;margin-top: 30px;}
  
   </style>
      </head>
  <body>
<div id="box1">你好</div>
<div id="box2">你好</div>
</div>
</body>
</html>

解决方案：

1. BFC规范
2. 想办法只给一个元素添加间距

margin传递

  margin传递的问题只会出现在嵌套的结构中，且只有maigin—top会有传递的问题，其它三个方向是没有问题的。

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#box1{height: 200px;width: 200px;background-color: red;}
#box2{height: 100px;width:100px;background-color: blue;margin-top: 100px;}
  
   </style>
      </head>
  <body>
<div id="box1">
<div id="box2"></div>
</div>
</div>
</body>
</html>

解决方案：

1. BFC规范
2. 给父容器加边框border：1px black solid；
3. margin换成padding

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#box1{height: 100px;width: 200px;background-color: red;padding-top: 100px;}
#box2{height: 100px;width:100px;background-color: blue;}
  /*用padding换成margin需要把父容器高度调低*/
   </style>
      </head>
  <body>
<div id="box1">
<div id="box2"></div>
</div>
</div>
</body>
</html>

margin自适应居中

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#box{height: 100px;width: 400px;background-color: red;
margin-left: auto;margin-right: auto;
/*左右都加上auto实现居中效果，单独加一个实现靠左靠右
实现居中也可以写成margin：0 auto；上下是不会自适应居中的
*/
}
   </style>
      </head>
  <body>
<div id="box"></div>
</div>
</body>
</html>

4.2HTML标签分类

按类型

1. block：块（div   p   ui  li  h1）
2. inline：内联(span a  em  strong   img ... )
3. inline-block：内联块(input  select...)

注：布局一般用块标签，修饰文本一般用内联标签
1. 块级元素

网页中类似于：p h1~h6 div

特点：

    1独占一行
     2.可以通过width/height设置大小
     3.默认的宽度是100%跟父元素宽相同,高度是0
     4.支持所有样式，可以加margin和padding
     5. 所占区域是一个矩形

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#box1，#box2{height: 100px;width: 200px;background-color: red;

}
   </style>
      </head>
  <body>
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
</html>

2. 行内元素

网页中类似的元素：a,span

特点：

1默认排列在一行
2行内元素不能设置width和heright,大小和内容大小一样
3行内元素如果想要实现居中，必须在父级元素上添加text-align:center;
行内元素添加text-align:center;
没有效果只能在父级元素（块元素）上设置
4行内元素的width和height默认为05设置marginpadding无效
5. 所占区域不一定是矩形.
6. 内联标签之间会有空隙，由换行引起的
解决方案：在父级标签和子标签中加font-size标签

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#content1,#content2{width: 100px;height: 100px;background-color: red;font-size: 16px;}
body{font-size: 0;}
   </style>
      </head>
  <body>
<span id="content1">内联1内联12内联1</span>
<span id="content2">内联2</span>
</div>
</body>
</html>

3. 块级行内元素

具备块级元素和行内元素的特点：img

特点：

既有块级元素特点也有行内元素特点

按内容

Flow:流内容
Metadata:元数据
Sectioning:分区（div...）
Heading:标题
Phrasing:措辞（strong...）
Embedded:嵌入的（添加图片...）
Interactive:互动的（输入框，下拉框...）

wu
图片详解：https://www.w3.org/TR/html5/dom.html

按显示

 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。（img,input...)
 非替换元素：将内容直接告诉浏览器。将其显示出来。(div,h1,p...)

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 

   </style>
      </head>
  <body>
<!--替换元素：不给图片加地址时，网页啥也没有，只有加上图片地址才会显示-->   
<img src="" alt="">
</div>
</body>
</html>

显示框类型

display：
block
inline
inline-book
none

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
div{height: 100px;width: 100px;background-color: red;display: inline;}
span{height: 100;width: 100;background-color: red;display: block;}
input{display:none ;}
/* none将输入框隐藏*/
   </style>
      </head>
  <body>
<div>块1</div>
<div>块2</div>
<span>内联1</span>
<span>内联2</span>
<input type="text">
</div>
</body>
</html>

区别：
display:none：不占空间的隐藏
visibility:hidden:占空间的隐藏

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#box1,#box2{width: 100px;height: 100px;background-color: red;}
#box1{display: none;}

   </style>
      </head>
  <body>
<div id="box1">块1</div>
<div id="box2">块2</div>

</div>
</body>
</html>

占空间
不占空间

标签嵌套规范

ul,li       dl dt dd     table  tr  td
块标签可以嵌套内联标签
<div>
<span></span>
<a href=""></a>
</div>
块标签不一定能嵌套块标签
 <p>
<div></div>
</p>
内联标签也不能嵌套块标签
a标签是一个例外
<a href="">
<div></div>
</a>

溢出隐藏

overflow：
visible:默认
hidden
scroll(滚动条右边和下边都有)
auto（自适应，只有右边有滚动条）
也可以单独设置（overflow-x,overflow-y）

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
div{width: 100px;height: 100px;border: 1px black solid;overflow: hidden;}
/*溢出部分会被隐藏*/

   </style>
      </head>
  <body>
   <div>
     溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
     溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
     溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
     溢出隐藏  溢出隐藏  溢出隐藏  溢出隐藏  溢出隐藏 
   </div>
</body>
</html>

透明度和手势

opacity:0（透明，依然会占空间）~1（不透明）
0.5（半透明）
cursor手势（指针样式）

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
#div1{width: 100px;height: 100px;background-color: red;opacity: 0.5;}
#div2{width: 100px;height: 100px;background-color: rgba(255,0, 0, 1);cursor:help;}
/*就算是透明依然会占空间，且所有的字标签也会呈透明状
opacity对整体进行透明操作
rgba只对背景进行透明操作
cuisor:url(./img/cursor.ico),auto;自定义手势*/
   </style>
      </head>
  <body>
   <div id="div1">这是一个块 </div>
   <div id="div2">这是一个块 </div>
</body>
</html>

最大最小宽高

min-width   min-height
max-width   max-height
注：要强化对百分比单位的理解

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
div{width: 100px;min-height: 100px;border: 1px black solid;}
/*当内容超过边框大小时，min-height会自适应补充高度，最小值为100px*/
   </style>
      </head>
  <body>
   <div >这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
      这是一个块 
   </div>
</body>
</html>

%单位，换算，按父容器大小进行换算
一个容器怎么适应屏幕大小：容器加height；body：100%；html：100%
html,body{height:100%}
.contrainer{height:100%}

###CSS默认样式

有些标签有默认样式：body,h1~h6,p,ul...
有些标签没有:div,span

CSS重置样式

CSS reset
简单的CSS reset
*{margin:0;padding:0;}
优点：不用考虑那些标签有默认的margin和padding
缺点：会稍微影响性能
ul{list-style:none;}
无序列表的点去掉
a{text-decoration:none;color:#666;}
img{display:block}
问题现象：图片跟容器底部有一些空隙
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。

wu 

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
div{border: 1px black solid;}
img{vertical-align: bottom;}
/*  img{display:block}也是可以的
baseline基线
bottom底线*/
</style>
      </head>
  <body>
   <div >
      <img src="#">
   </div>
  
</body>
</html>

写具体页面的时候或一个布局效果的时候：
1.写结构
2.写重置
3.写具体样式

4.3 边框

粗细 样式 颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:300px;
border:1px
solidblack;
text-align:center;
margin:0
auto;
}
h2{
font-size:14px;
background-color:#009E94;
line-height:30px;
margin:0;
}
form{
background-color:#009E94;
padding-bottom:20px;
}
/*border:粗细样式颜色*/
div:nth-of-type(1)>input{
border:2px solid red;
}
div:nth-of-type(2)>input{
border:2px dashed orange;
}
div:nth-of-type(3)>input{
border:2px
doubleblack;
}
</style>
</head>
<body>
<div class="box">
<h2>用户登录</h2>
<form action="#">
<div>
<span>账号</span>
<input type="text"/>
</div>
<div>
<span>密码</span>
<input type="text"/>
</div>
<div>
<span>邮箱</span>
<input type="text"/>
</div>
</form>
</div>
</body>
</html>

4.4内外边距

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:300px;
border:1px solid black;
text-align:center;
margin:0 auto;/*auto自动对齐*/
}
h2{
font-size:14px;
background-color:#009E94;
line-height:30px;
margin:0;
}
form{
background-color:#009E94;
padding-bottom:20px;
}
div:nth-of-type(2)>input{
border:1px solid red;
/*margin:10px;上下左右都是10px
margin:5px 20px;上下 左右
margin:5px 20px 15px 10px;上右下左顺时针
*/
margin:0;
}
</style>
</head>
<body>
<div class="box">
<h2>用户登录</h2>
<form action="#">
<div>
  <span>账号</span>
<input type="text"/>
</div>
<div>
<span>密码</span>
<input type="text"/>
</div>
<div>
<span>邮箱</span>
<input type="text"/>
</div>
</form>
</div>
</body>
</html>

盒子的计算方式：
wu
margin + border + padding +内容宽度
前段美工的工作。

5.浮动

5.1标准文档流
标准文档流是指元素在排版布局的过程中，元素会默认自动从左往右，从上往下排列的方式
wu

5.2display

不同的元素之间可以相互转换：  
display:元素类型
display:block;块级元素
display:inline;行内元素
display:inline-block;行内块元素
1块级元素可以包含"块级元素","行内元素","行内块元素"
2行内元素最好只包含"行内元素"
3行内块元素可以包含"块级元素","行内元素","行内块    元素"它的宽度是由里面的内容撑开的
典型的块元素div
典型的行内元素spandisplay:block;设置成块元素
display:inline;设置成行内元素
display:inline-block;设置成行内块元素

5.3float

可以把浮动理解成一个排列的命令(要么左排列要么右排列)，它向页面发送一个命令以后，
页面上的元素就要遵循这个命令进行布局
float的属性值：
none：设置对象不浮动
left：设置对象浮在左边
right：设置对象浮在右边

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
body{border: 1px black solid;}
#box1{width: 100px;height: 100px;background-color: red;float:left}
#box2{width: 200px;height: 200px;background-color: yellow;}
/*浮动的元素已经脱离文档流了，不占空间所以会覆盖在未浮动的元素上
如果都加上浮动，那么body就只剩下一个上边框*/
</style>
      </head>
  <body>
   <div id="box1"></div>
   <div id="box2"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
border:1px solid red;
}
.box div{
border:solid;
display:inline-block;
}
.a{
width:100px;
height:100px;
background:red;
}
.b{
width:100px;
height:100px;
background:#009E94;
float:right;
}
.c{
width:100px;
height:100px;
background:#FFA500;
}
</style>
</head>
<body>
<div class="box">
<div class="a">
div1
</div>
<div class="b">
div2
</div>
<div class="c">
div3
</div>
</div>
</body>
</html>

float注意点
1.只会影响后边的那个元素
2.内容默认提升半层
3.默认宽根据内容决定

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
body{border: 1px black solid;}
#box1{width: 100px;height: 100px;background-color: red;}
#box2{width: 200px;height: 200px;background-color: yellow;float: left;}
#box3{width:300px;height: 300px;background-color: blue;}
#box{background-color: green;float: left;}
/*默认宽是与父容器相同，加上浮动后宽与文字等宽*/
</style>
      </head>
  <body>
   <div id="box1"></div>
   <div id="box2"></div>
   <div id="box3">这是一个块这是一个块
      这是一个块这是一个块这是一个块这是一个块
      这是一个块这是一个块这是一个块这是一个块
   </div>
   <!--字不会出现在黄色块内，可以用来达到图文描述的效果 -->
   <div id="box4">这是一个块</div>
</body>
</html>

4.换行排列

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style > 
ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}
li{width: 100px;height: 100px;background-color: red;border: 1px yellow solid ;box-sizing: border-box;float: left;}
</style>
      </head>
  <body>
 <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
 </ul>
</body>
</html>

wu 

5.主要给块元素添加，但也可以给内联元素添加

<!DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style >
   span{float: right;} 
</style>
      </head>
  <body>
 <span>aaa</span>
 <span>bbb</span>
</body>
</html>

wu
清除浮动

上下级
利用clear属性清除float浮动

<html>
    <head>
        <title></title>
        <style>
            #box1{width: 100px;height: 100px;background-color: red;float: right;}
            #box2{width: 200px;height: 200px;background-color: blue;clear: right;}
         </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>
</html>

wu 

嵌套：
固定宽高:不推荐，不能把高度固定死,不适合做自适应的效果。
  方式一：手动设置父元素的高度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
border:1px solid red;
background-image:url(img/4.png);
height:205px;
}
.box div{
border:solid;
display:inline-block;/*让块元素变成行内块元素*/
}
.a{
width:200px;
height:200px;
background:red;
float:left;
}
.b{
width:200px;
height:200px;
background:#009E94;
float:right;
}
.c{
width:200px;
height:200px;
background:#FFA500;
float:right;
}
</style>
</head>
<body>
<div class="box">
<div class="a">
div1
</div>
<div class="b">
div2
</div>
<div class="c">
div3
</div>
</div>
</body>
</html>

父元素浮动:不推荐，因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范)，如果有子元素想溢出,那么会受到影响。
 方式二：在父元素里面添加一个overflow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
border:1px solid red;
background-image:url(img/4.png);
overflow:hidden;
}
.box div{
border:solid;
display:inline-block;
/*让块元素变成行内块元素*/
}
.a{
width:200px;
height:200px;
background:red;
float:left;
}
.b{
width:200px;
height:200px;
background:#009E94;
float:right;
}
.c{
width:200px;
height:200px;
background:#FFA500;
float:right;
}
</style>
</head>
<body>
<div class="box">
<div class="a">
div1
</div>
<div class="b">
div2
</div>
<div class="c">
div3
</div>
</div>
</body>
</html>

   overflow隐藏溢出示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:200px;
height:400px;
border:1px solid #009E94;
/*overflow:hidden隐藏溢出*/
overflow:scroll;
/*加一个滚动条*/
}
</style>
</head>
<body>
<div class="box"><img src="img/4.png"height="200px"/>
<p>
9月23日是第五个中国农民丰收节。看神州大地五谷丰登，处处瓜果飘香，满眼色彩斑斓、生机盎然，真让人由衷赞叹：这是希望的田野，这是丰收的中国！
</p>
</div>
</body>
</html>

display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签:不推荐，会多添加一个标签。
  方式三：增加一个空的div标签

clear：both 清除浮动的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
border:1px solid red;
background-image:url(img/4.png);
}
.box div{
border: solid;
}
.a{
width:200px;
height:200px;
background:red;
float:left;
}
.b{
width:200px;
height:200px;
background:#009E94;
float:right;
}
.c{
width:200px;
height:200px;
background:#FFA500;
float:right;
}
.clear{
clear:both;
/*清除浮动*/
}
</style>
</head>
<body>
<div class="box">
<div class="a">
div1
</div>
<div class="b">
div2
</div>
<div class="c">
div3
</div>
<div class="clear"></div>
</div>
</body>
</html>

after伪类:推荐,是空标签的加强版,目前各大公司的做法。
方式4：增加一个伪类元素

clear标签只对块元素起作用，对内联元素无作用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
border:1px solid red;
background-image:url(img/4.png);
}
.box div{border:solid;}
.box:after{
content:'';/*增加一个空内容*/
display:block;
clear:both;
}
.a{
width:200px;
height:200px;
background:red;
float:left;
}
.b{
width:200px;
height:200px;
background:#009E94;
float:right;
}
.c{
width:200px;
height:200px;
background:#FFA500;
float:right;
}
</style>
</head>
<body>
<div class="box">
<div class="a">
div1
</div>
<div class="b">
div2
</div>
<div class="c">
div3
</div>
</div>
</body>
</html>
clownwithoutmask
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS学习笔记
m0_58761900的博客
09-18 3021
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css笔记
qq_53231262的博客
01-23 1321
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结css基础选择器1. css选择器的作用2. 选择器分类01-标签选择器02-类选择器03-id选择器04-通配符选择器05-总结css字体属性1. 字体体系2. 字体大小3. 字体粗细4. 文字样式5. 文字复合属性写法6. 字体属性总结css文本属性1. 文本颜色2. 对齐文本3. 装饰文本4. 文本缩进5. 行间距6. 文本总结css的引入方式1. 三种样式表2
CSS笔记（精简）
weixin_46160720的博客
03-11 4429
CSS笔记 HTML 前端教程 前端笔记
CSS笔记II
皮鞭蘸碘伏边抽边消毒
01-15 1244
CSS3最全笔记 ，非常详细，HTML5+CSS3 详细完全体笔记
B站pink老师HTML+CSS笔记
m0_56428225的博客
07-20 2899
b站pinkl老师HTML+css笔记（包括h5c3+移动端)
css笔记1
qq_61466402的博客
03-13 7260
目录 css语法 实例 例子解释 css选择器 css使用 三种使用css的方法 外部 CSS 内部 CSS 行内 CSS 多个样式表 层叠顺序 css注释 实例 实例 实例 HTML 和 CSS 注释 css颜色 css背景色 CSS 文本颜色 CSS 边框颜色 CSS 颜色值 实例 css背景 CSS background-color css背景图像 css背景重复 css背景附着 css背景简写 css语法 CSS 规则集（rule...
第一周学习html css笔记
DarrenTitor的博客
10-05 311
0 1 solid不能遗漏 2 缺口方框，用“&amp;lt;fieldset”和“&amp;lt;legend”组合 3 图片固定在某位置，不随滚轮滚动，position：fixed 4 标题在表格的上方中央，caption-side: top ...
【整理+总结】pink老师前端三件套之CSS笔记（二）CSS属性 & 元素显示模式 & 引用方式 & 三大特性
weixin_42771853的博客
12-08 2218
1. CSS属性：字体属性、文本属性、背景属性 2. 元素显示模式：块元素、行内元素、行内块元素 3. CSS 引用方式：行内样式表、内部样式表、外部样式表 4. CSS 三大特性：层叠性、继承性、优先级
CSS入门学习笔记+案例
热门推荐
itboy
06-16 29万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS笔记.pdf
07-14
CSS笔记.pdf
css-垂直居中的几种写法
xxuxioxx的博客
05-27 325
垂直居中的几种写法
CSS 媒体查询 响应式开发
生产队的驴
05-27 287
媒体查询（Media Queries）是CSS3的技术，可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。媒体查询可以使网页在不同设备上呈现不同的样式，以实现响应式设计。
CSS实现一个雨滴滑落效果
云加速
05-28 400
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
了解CSS中的link和@import引入CSS的区别
祈澈菇凉
05-28 123
【代码】了解CSS中的link和@import引入CSS的区别。
css 渐变色边框
最新发布
随风潜入夜，不白头
05-28 286
具体用法，拷贝到你的html中，在浏览器上慢慢调试即可！
pink老师css笔记
08-17
很抱歉，我无法根据提供的引用内容回答你的问题，因为引用内容并没有提到"Pink老师CSS笔记"这个话题。如果你有关于"Pink老师CSS笔记"的具体问题，我将非常乐意帮助你回答。<span class="em">1</span><span class="em...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值