CSS学习笔记

小刘私坊

已于 2023-05-09 20:32:21 修改

阅读量1k

点赞数

分类专栏：前端文章标签： css 学习笔记

于 2023-05-01 11:10:23 首次发布

本文链接：https://blog.csdn.net/python_ghost/article/details/130454710

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS

样式：

内联样式：

<!-- 内联样式 
    所有标记 有公共的html属性 style 值为css的内容
    <标记 style="css属性名:属性值;css属性名:属性值;">内容</标记>
    缺点:html和css混淆在一起，单个设置样式麻烦
    -->

<h1 style="color: red; background-color: yellow">一级标题</h1>
<p>段落标记</p>
<p>段落标记</p>
<p>段落标记</p>
<h2>二级标题</h2>
<h2 style="color: blue">二级标题</h2>
<h2>二级标题</h2>
<h3 style="background-color: pink">三级标题</h3>

内嵌样式：

<style>
      /* ctrl+/   css注释  style标签中只能写css的内容 */
      /* 
      css语法：
        选择器{
          属性名:属性值;
          属性名:属性值;
        }
      */

      h2 {
        color: aqua;
        background-color: yellow;
      }
      p {
        background-color: pink;
      }
    </style>

外联样式：

<link href="./css/index.css" rel="stylesheet" />

基础选择器：

元素选择器：

<style>
      /* 元素 (标签)选择器：以标签名作为选择器
       给所有的h2标签添加样式
      */
      h2 {
        color: red;
      }
      p {
        color: yellow;
      }
    </style>

ID选择器：

<style>
  /* 2使用id选择器添加样式
#id值{属性名:属性值;}
*/
  #one {
    color: red;
  }
  #two {
    color: yellow;
  }
</style>
    
<h2 id="one">二级标题</h2>
<h2>二级标题</h2>
<h2>二级标题</h2>
<h2 id="two">二级标题</h2>

类选择器：

<style>
  .one {
    color: yellow;
  }
  .two {
    background-color: blue;
  }
</style>

<p>段落标记</p>
<p class="one">段落标记</p>
<img src="./img/bd2.png" />
<a href="http://www.baidu.com">百度</a>
<h2>二级标题</h2>
<h2 class="one two">二级标题</h2>
<h2>二级标题</h2>

复合选择器：

后代选择器：

.out .inner p {
  color: palevioletred;
}

<div class="out">
      <div>
        <div class="inner">
          <p>段落标记</p>
        </div>
      </div>
    </div>

子代选择器：

.out > .one > .inner {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

   <div class="out">
      <div class="one">
        <div class="inner">
          <p>段落标记</p>
        </div>
      </div>
      <p>段落标记</p>
      <div class="inner">inner</div>
    </div>

集群选择器：

<style>
      /* .one {
        color: red;
      }
      .two {
        color: red;
      }
      和下面的是等价的
      
      */

      .one,
      .two {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="one">sssssss</div>
    <div class="two">two</div>
  </body>

优先级：

引入方式的优先级：

内联样式 > 内嵌样式 > 外联样式（就近原则）

选择器的优先级：

!important >id选择器(100)> 类选择器(10)>元素选择器(1)

复合选择器的优先级：

独立优先级相加比较

通配符选择器：

找到页面所有的样式，设置样式

*{
    属性名:属性值
}

样式：

字体样式：

/* 字体大小
浏览器默认文字大小是16px
单位一点要设置，否则无效 */
font-size: 24px;

/* 字体粗细
bold  加粗
font-weight: lighter;
纯数字：100-900的整百数
*/
font-weight: lighter;

/* 字体样式 
normal （默认值） 正常
italic  倾斜
*/
font-style: italic;

/* 字体
"Microsoft YaHei" 微软雅黑  黑体 宋体 楷体....
网页开发时，尽量使用系统常见自带的字体，保证不同用户浏览器都能正常显示
*/
font-family: '楷体', '黑体';

复合写法：
/* 复合写法  连写
font:style weight size family;

只能省略前两个，省略了相当于设置了默认值
同时设置单写和连写形式：
要把单写的样式写在连写的下面
要么把单写的样式写在连写里面
*/

/* font: italic bold 20px '楷体'; */

font: italic 20px '楷体';
/* font-style: italic; */

样式层叠问题：

/* 同一个标签设置了相同的样式  如何渲染?
      
样式会层叠(覆盖)，写在最下面的会生效
css  层叠样式表
层叠就是叠加的意思，样式可以一层一层的叠加覆盖
*/
p {
color: red;
color: brown;
}

文本样式：

缩进：

<style>
    p {
        font-size: 24px;
        /* 文本缩进
        数字+px
        数字+em  (推荐  1em=当前标签的font-size的大小)
        */
        /* text-indent: 32px; */
        text-indent: 2em;
    }
</style>

水平对齐方式：

<style>
    p {
        /* 
        如果需要让文本水平居中，text-align给文本所在的标签设置(文本父元素)
        文本水平对齐方式 
        left  居左
        center  居中
        right  居右
        */
        text-align: right;
    }
    .one {
        /* text-align 可以让 a img input span 这些元素水平居中  ，
        给这些元素的父元素加text-align属性 */
        text-align: center;
    }
</style>

文本修饰：

<style>
    p {
        /* 文本修饰
        underline 下划线 (常用)
        line-through 删除线(不常用)
        overline  上划线 (几乎不用)
        none 无装饰线  (最常用)

        开发中使用text-decoration: none; 清除a标签默认的下划线
        */
        text-decoration: overline;
    }
    a {
        /* 无装饰线  */
        text-decoration: none;
    }
</style>

行高：

<style>
    * {
        margin: 0;
    }
    /* 控制一行的上下间距 
    行高
    取值:  数字+px   倍数(当前标签font-size的倍数)
    应用:
    让单行文本垂直居中  line-height:文本父元素的高度
    网页精准布局，设置line-height:1取消上下间距
    */
    p {
        /* line-height: 30px; */
        /* line-height: 2; */

        /* 
        font:style weight size/line-height family;
        */

        font: italic bold 30px/40px '楷体';
    }
    .main {
        background-color: bisque;
        height: 40px;
        line-height: 40px;
    }
</style>

选择器补充：

交集选择器：

选择器之间紧挨着

交集选择器中有标签选择器，标签选择器必须放在最前面

作用:选中页面中同时满足多个选择器的标签

选择器1选择器2{}

<style>
    p {
        font: bold 30px/46px '楷体';
    }
    /* 选中的是p标签中class="active"的标签 */
    p.active {
        color: blueviolet;
    }
</style>
</head>
<body>
    <p>段落标记</p>
    <p>段落标记</p>
    <p class="active">段落标记</p>
    <p>段落标记</p>
</body>

伪类选择器：

用来描述一个元素的特殊状态;比如第一个元素，某个元素的子元素，鼠标点击的元素

静态伪类：

只能用于超链接的样式

:link  超链接点击之前
:visited 链接被访问过之后

动态伪类：

所有标签都适用

：hover  鼠标悬浮在超链接上
: active  被激活  鼠标点击 不松手
：focus  标签获得焦点，适用文本，点击输入改变

<style>
    /* 鼠标悬浮在h3上 */
    h3:hover {
        background-color: aquamarine;
        color: brown;
    }
    /* 鼠标点击 不松开 */
    h3:active {
        color: chartreuse;
    }
    /* 了解 */
    input:focus {
        background-color: cornflowerblue;
    }
</style>
</head>
<body>
    <h3>三级标题</h3>
    <h3>三级标题</h3>
    <h3>三级标题</h3>
    <h3>三级标题</h3>
    <h3>三级标题</h3>

    <input type="text" />
</body>

伪类应用于超链接（重要，顺序）

<style>
    /* 链接点击之前 */
    a:link {
        color: blue;
    }

    /* 链接访问之后 */
    a:visited {
        color: aqua;
    }
    /* 鼠标放到标签上时 */
    a:hover {
        color: brown;
    }
    /* 被激活  鼠标点击 不松手 */
    a:active {
        color: chartreuse;
    }

    /* 
    4个伪类同时应用于a标签时要注意顺序问题

    hover要放到link 和visited的后面
    active要放到hover的后面
    */
</style>
</head>
<body>
    <a href="http://www.baidu.com">超链接</a>
</body>

其他伪类：

: firt-child

: last-child

: nth-child

: nth-of-type

<style>
    h3:first-child {
        background-color: red;
    }
    h3:nth-child(2n-1) {
        background-color: yellow;
    }

    /* 主要针对的是定位的元素里有好多不同类型的元素 */
    /* 指定元素的奇数行 */
    /* p:nth-of-type(even) {
    background-color: aqua;
    } */
    /* p:first-of-type {	
    color: brown;
    font-weight: bold;
    } */
    /* 指定元素的最后一个 */
    /* p:last-of-type {
    background-color: chartreuse;
    } */

    /* 从第三个开始，包含第三个 到最后 */
    /* h3:nth-of-type(n + 3) {
    background-color: cyan;
    } */
    /* 前3个  包含第3个 */
    /* h3:nth-of-type(-n + 3) {
    background-color: cyan;
    } */

    /* h3:nth-child(n + 3) {
    background-color: yellow;
    } */

    /* h3:nth-child(-n + 3) {
    background-color: bisque;
    } */

    /* 

    E:nth-child 对父元素里所有孩子排序选择，先找到第n个孩子,然后看看是否和E元素匹配
    E:nth-of-type 对父元素里指定的子元素进行排序选择，先去匹配E，在根据E找到第n个孩子
    */
</style>
</head>
<body>
    <h3>三级标题1</h3>
    <h3>三级标题2</h3>
    <h3>三级标题3</h3>
    <p>段落标记</p>
    <p>段落标记</p>
    <h3>三级标题4</h3>
    <h3>三级标题5</h3>
    <p>段落标记</p>
    <h4>四级标题</h4>
    <p>段落标记</p>
    <h4>四级标题</h4>
    <h4>四级标题</h4>
    <h3>三级标题1</h3>
    <h3>三级标题2</h3>
    <h3>三级标题3</h3>
</body>

简写语法，快速生成代码：

<!-- 回车 -->
<!-- div -->
<div></div>
<!-- .red -->
<div class="red"></div>
<!-- #one -->
<div id="one"></div>
<!-- div#one -->
<div id="one"></div>
<!-- div#one.one -->
<div id="one" class="one"></div>
<!-- ul>li{我是内容} -->
<ul>
    <li>我是li的内容</li>
</ul>

<!-- ul>li{我是内容}*3 -->
<ul>
    <li>我是内容</li>
    <li>我是内容</li>
    <li>我是内容</li>
</ul>

背景属性：

<style>
    /* 背景图片 和img的区别
    背景图片 墙纸
    img  墙上挂的钟表
    */
    .main {
        width: 800px;
        height: 800px;
        /* 背景颜色   transparent透明
        颜色的表示方式：
        第一种： red  yellow blue  green...
        第二种:十六进制  前2位代表红色，中间两位代表绿色，后两位蓝色 ;  取值范围 0-9，a-f
        #111223   #00ff00  简写 #0f0  
        #f3f3f3，#ff33f3不能简写 
        第三种：rgb(200,212,0)   每一个的取值是0~255
        rgba(200,234,0,0.5)   a透明  0-1

        */
        background-color: rgba(10, 212, 200, 1);
        /* 背景图片 */
        background-image: url(./img/logo.png);
        /* 背景平铺
        repeat  水平和垂直方向都平铺
        repeat-x  水平方向都平铺
        repeat-y 垂直方向都平铺
        no-repeat  水平和垂直方向都不平铺
        */
        background-repeat: no-repeat;

        /* 背景位置
        方位名词：最多表示9个位置  水平方向 left center right  垂直方向 top center bottom
        数字+px  ： 0 0 左上角  x y
        注意：方位名词可以和坐标轴混用，第一个表示水平  第二个表示垂直
        */
        background-position: 10px center;
    }
</style>

复合写法：

.main {
    width: 800px;
    height: 800px;

    /* 复合写法
    background：color image repeat position
    */

    /* background: red url(./img/logo.png) no-repeat left center; */

    background: yellow url(./img/logo.png) no-repeat;
    background-position: left center;
}

元素的显示模式：

块级元素：

独占一行（一行只能显示一个）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高

h1~h6,ul,li ,p,ol,dl ,dt,dd ,header,nav,main,footer

行内元素：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

span,b,u,i,em,strong

行内块元素：

一行可以显示多个
可以设置宽高

input textarea,select,button，img

元素显示模式转换：

改变元素显示的特点，让元素符号我们布局要求

display:block;         转换为块元素    
display:inline-block;  转换为行内块元素 
display:inline;        转换为行内元素    极少使用

注意: 几乎不会把块元素转换为其它元素，用的最多的是把行内元素转换为行内块或者块，比如a

元素嵌套规范：

块元素一般作为大容器，可以嵌套文本，块元素，行内元素，行内块元素等...

**注意** p标签里不能嵌套 p，div，h等块级元素

a标签内部可以嵌套任意标签

**注意:** a标签不能嵌套a标签

行内元素不要嵌套块元素

元素和内容的居中方法：

元素 <标签名>内容</标签名>

标签 <标签名>

内容 xxx

<style>
    .main {
        text-align: center;
    }
    /* marign */
    .container {
        width: 300px;
        height: 100px;
        background-color: red;
        margin: 0 auto;
    }
    .head {
        width: 400px;
        height: 50px;
        background-color: yellow;
        line-height: 50px;
    }
</style>
</head>
<body>
    <!-- 
第一种:
text-align(文本，行内元素，行内块元素)
如果要让以上内容实现居中，给他们的父元素(块)设置  text-align属性
-->
    <div class="main">hello world</div>
    <div class="main">
        <span>span标记</span>
    </div>
    <div class="main">
        <img src="./img/logo.png" width="100" alt="" />
    </div>
    <div class="main">
        <input type="text" />
    </div>

    <hr />
    <!-- --------------------------------------------------- -->
    <!-- margin:0 auto
块元素水平居中，直接给当前元素设置属性
-->
    <div class="container"></div>

    <!-- 垂直居中 
line-height  单行文本 -->
    <div class="head">我是头部页面</div>

CSS特性：

继承性：

子元素继承父元素样式的特点

//继承常见的属性
文字属性都可以继承
color
font-style，font-weight，font-size，font-family
text-indent，text-align
line-height
list-style
....
//通过调试工具可以判断是否可以继承

好处:在一定程度上减少代码

应用：

给ul设置list-style:none；去除默认的小圆点样式
给body设置统一的font-size的样式，统一不同浏览器的默认文字大小（移动端）

继承性失效问题

<style>
    .main {
        font-size: 14px;
    }

    .box {
        color: red;
    }
</style>
</head>
<body>
    <!-- 元素有浏览器默认的样式，继承性依然存在，但是优先显示浏览器默认样式
1: h标题系列的标签，font-size会继承失效
2：a标签color会继承失效
-->

    <div class="main">
        我是h3标记
        <!-- 浏览器默认的字体大小样式 把继承的font-size给覆盖了 -->
        <h3>我是h3标记</h3>
    </div>

    <div class="box">
        box标记
        <a href="#">超链接</a>
    </div>

层叠性：

<style>
    p {
        color: red;
    }
    .main p {
        background-color: yellow;
        background-color: bisque;
        /* 层叠覆盖 */
    }
    /* 以上两个样式共同作用域p标记 层叠性 */
</style>
</head>
<body>
    <div class="main">
        div标记
        <p>p标记</p>
    </div>
</body>

优先级：

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

!important 写在属性值的后面 分号的前面
!important提升不了继承的优先级，只要是继承优先级是最低
实际开发中不建议使用!important

伪类选择器根据前面选择器来进行判断

盒子模型：

页面中的每一个标签都看成是一个盒子

浏览器在显示页面的时候，把页面中的元素看作是一个个矩形区域，也称之为盒子

css中盒子由 内容content，内边距padding，边框border，外边距margin 构成，就是盒子模型

内容content：

内容的宽度和高度

通过width和height属性设置的就是 内容区域的大小

边框border：

边框粗细，边框样式，边框颜色

.box {
    width: 200px;
    height: 200px;
    /* 边框粗细 */
    /* border-width: 5px; */
    /* 边框样式
    dashed  虚线
    solid 实线
    dotted 点线
    */
    /* border-style: dotted; */
    /* 边框颜色 */
    /* border-color: red; */
    /* 连写
    border:粗细 样式  颜色;
    粗细和样式必须一起写 不能省略
    */
    /* border: 5px solid yellow; */

    /* 单方向 */
    border-left: 3px solid red;
    border-top: 5px solid;
    border-bottom: 6px dashed blue;
    border-right: 10px solid green;
}

注意：

盒子实际大小宽度=左边框+内容的width+右边框
盒子实际大小高度=上边框+内容的height+下边框

盒子被border撑大后，手动在内容中减去border的大小

三角形：

设置的宽度是中间内容宽度，数值大于0时，四周边框为梯形，0的时候，中间没有内容区域，边框为三角形

<style>
    .main {
        width: 0px;
        height: 0;
        border-left: 40px solid red;
        border-top: 40px solid;
        border-bottom: 40px solid blue;
        border-right: 40px solid green;
    }
    .box {
        width: 0;
        height: 0;
        border-left: 60px solid red;
        border-bottom: 60px solid transparent;
        border-right: 60px solid transparent;
        border-top: 60px solid transparent;
    }
</style>
</head>
<body>
    <div class="main"></div>

    <div class="box"></div>
</body>

内边距padding：

内容和盒子边框之间的距离–内边距 padding

.box {
    width: 50px;
    height: 21px;
    background-color: thistle;
    /* 上下左右各10px */
    /* padding: 10px; */
    /* padding:上下各10px 左右各20px */
    /* padding: 10px 20px; */
    /* padding:上10px 左右各20px  下30px*/
    /* padding: 10px 20px 30px; */

    /* padding:上10px 右20px  下30px 左40px  顺时针顺序*/
    padding: 10px 20px 30px 40px;
}

盒子实际的大小：

1：设置的width和height 是内容的宽高
2：设置边框会撑大盒子
3：设置padding也会撑大盒子

盒子大小计算：

盒子实际大小宽度=左边框+左padding+内容的width+右padding+右边框
盒子实际大小高度=上边框+上padding+内容的height+下padding+下边框

盒子被border和padding撑大后，计算多余的大小，手动在内容中减去

padding什么情况下不会撑大盒子：

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度，给子盒子设置左右的padding，和左右border不会撑大盒子(块元素)

<style>
    .out {
        width: 500px;
        height: 500px;
        background-color: gray;
    }
    .inner {
        /* 不设置宽度 */
        background-color: aquamarine;
        border: 20px solid;
        padding: 0 30px;
    }
</style>
</head>
<body>
    <div class="out">
        <div class="inner">123</div>
    </div>
</body>

手动内减：

width=实际宽度-左边框-左padding-右padding-右边框

height=实际高度-上边框-上padding-下padding-下边框

.box {
    /* 
    实际宽度=左边框+左padding+width+右padding+右边框
    实际高度=上边框+上padding+height+下padding+下边框
    */
    width: 240px;
    height: 240px;
    border: 10px solid;
    padding: 20px;
    background-color: pink;
}

自动内减：

给盒子设置box-sizing: border-box

/* 自动内减 */
box-sizing: border-box; /*怪异盒模型----移动端*/
width: 300px; /*width  height  是盒子实际的宽高,不是内容的宽高*/
height: 300px;
border: 10px solid;
padding: 20px;
background-color: pink;

外边距margin：

设置边框以外，盒子和盒子之间的距离

.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
    /* 上下左右各10px */
    /* margin: 10px; */
    /* 上下各10px  左右各20px*/
    /* margin: 10px 20px; */
    /* 上10px  左右各20px  下30px*/
    /* margin: 10px 20px 30px; */

    /* 上10px  右各20px  下30px  左40px*/
    /* margin: 10px 20px 30px 40px; */

    /* 单方向 */
    margin-left: 20px;
    margin-top: 40px;
    margin-bottom: 50px;
    margin-right: 40px;
}

清除默认的内外边距：

body默认有margin：8px

p默认有上下的margin

ul默认有margin和padding-left

…项目开始之前要清除这些标签默认的margin和padding

方法一：

body,
button,
dd,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
ul,
td,
textarea,
th {
    margin: 0;
    padding: 0;
}

方法二：

* {
    margin: 0;
    padding: 0;
}

外边距问题：

1、正常情况：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    span {
        width: 100px;
        height: 100px;
        display: inline-block;
        background-color: red;
    }
    span:first-child {
        background-color: yellow;
        margin-right: 10px;
    }
    span:last-child {
        margin-left: 20px;
    }
</style>
</head>
<body>
    <!-- 正常情况 水平布局的盒子，左右的margin正常，互不影响
最终两者距离为左右margin的和
-->
    <span>span1</span>
    <span>span2</span>
</body>

2、外边距折叠现象（2种）：

合并

<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 200px;
        height: 200px;
    }
    .box {
        background-color: red;
        margin-bottom: 30px;
    }
    .main {
        background-color: yellow;
        margin-top: 20px;
    }
</style>
</head>
<body>
    <!-- 垂直布局的块级元素，上下的margin会合并 
最终两者的距离为margin的最大值
避免这种问题，只给其中一个盒子设置margin即可
-->
    <div class="box"></div>
    <div class="main"></div>
</body>

塌陷

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        /* 
        第一种
        width: 300px;
        height: 280px;
        background-color: rebeccapurple;
        padding-top: 20px; */

        width: 300px;
        height: 300px;
        background-color: rebeccapurple;
        /* overflow: hidden; */
        float: left;
    }
    .main {
        margin-top: 20px;
        width: 100px;
        height: 100px;
        background-color: brown;
    }
</style>
</head>
<body>
    <!-- 互相嵌套的块级元素，子元素的margin-top会作用在父元素上 ，导致父元素一起往下移动
解决方法：
1：给父元素设置padding-top,父元素的高度根据需求要自减
2：给父元素设置overflow:hidden,子元素的margin-top不能去掉
3：设置浮动


-->
    <div class="box">
        <div class="main"></div>
    </div>
</body>

标准流：

标准流又叫文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见文档流排版规则：

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素从左往右水平布局空间不够自动换行

浮动：

作用：

让垂直布局的盒子变成水平布局

特点：

浮动元素会脱离标准流，在标准流中不占位置

浮动元素可以覆盖标准流中的元素

浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

浮动元素有特殊的显示效果

1：一行可以显示多个

2：可以设置宽高

3：浮动元素不设置宽高，没有内容，宽高各为0

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background-color: blue;
    }
    .box .left {
        /* width: 400px;
        height: 100px; */
        background-color: red;
        /* 左浮动 */
        float: left;
    }
    .box .right {
        /* width: 400px;
        height: 100px; */
        background-color: yellow;
        /* 右浮动 */
        float: right;
    }

    .foot {
        height: 300px;
        background-color: blueviolet;
    }
</style>
</head>
<body>
    <!-- 让垂直布局的盒子变成水平布局   
谁要从垂直布局变为水平布局，就给谁加float

特点：
浮动元素会脱离标准流，在标准流中不占位置
浮动元素可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果
1：一行可以显示多个
2：可以设置宽高
3：浮动元素不设置宽高，没有内容，宽高各为0
-->
    <div class="box">
        <div class="left"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="right"></div>
        <span class="left"></span>
        <span class="left"></span>

        <span class="left"></span>

        <!-- <div class="right"></div> -->
    </div>

    <div class="foot"></div>
</body>

伪元素选择器：

::before
::after

.box {
}

    /* 在元素的内容的前面添加内容*/
    .box::before {
    content: 'width';
    color: red;
    font-size: 40px;
    }
    /* 在元素的内容的后面添加内容*/
    .box::after {
    content: 'word';
    color: blue;
}

清除浮动：

概念:

如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因:子元素浮动后脱离了标准流

解决：

给父元素设置高度：

内容的高度高于父元素，父元素不会被撑开，影响了整体的布局

额外的标签：

在父元素内容的最后面添加一个块级元素
给添加的块级元素设置 clear:both

缺点：在页面中添加额外的标签，页面的结构变得复杂

单伪元素清除法：

用伪元素替代了额外的标签

基本写法：

/* 伪元素替代额外的div  基本写法 */
.box::after {
  content: '';
  /* 转换为块元素 */
  display: block;
  clear: both;
}

完整写法：

/* 伪元素替代额外的div  基本写法 */
.box::after {
  content: '';
  /* 转换为块元素 */
  display: block;
  clear: both;
  height: 0;
	/* 隐藏 */
  visibility: hidden;  
}

优点：给标签添加类就可以清除浮动

双伪元素清除法：

.clear::before,
.clear::after {
  content: '';
  /*类似于table 作为块级表格来显示
  表格前后有换行符 */
  display: table;
}
.clear::after {
  clear: both;
}

给父元素设置overflow:hidden：

直接给父元素添加overflow:hidden属性

.clear {
  overflow: hidden;
}

好处：方便（内容溢出隐藏）

BFC：

块格式化上下文(Block Formatting Context)

触发BFC会独立出来一个渲染区域，让处于BFC内部的元素与外部的元素相隔离，使内外元素不会相互受影响

BFC能够影响盒模型的渲染规范

怎么触发BFC

浮动元素float属性为left/right
定位元素position属性为absolute 和fixed
行内块元素是BFC盒子
html标签是BFC盒子
overflow属性取值不为visible ，如auto，hidden

BFC盒子特点

bfc盒子会默认包裹住内部子元素(标准流，浮动)—应用清除浮动
BFC盒子本身与子元素之间不存在margin的塌陷问题—应用 margin 塌陷

定位：

标准流：

块级元素独占一行------垂直布局
行内元素/行内块元素一行显示多个-----水平布局

浮动：

让原本垂直布局的块元素变成水平布局

定位：

可以让元素自由的摆放在网页的任意位置
用于盒子之间的层叠情况

使用场景：

定位之后元素层级越高，可以层叠在其他盒子上
可以让盒子固定在屏幕中的某个位置

使用步骤：

使用定位元素position

absolute   绝对定位
relative   相对定位
static     静态定位
fixed      固定定位

设置偏移值

偏移值分为两个方向，水平和垂直方向各选一个

水平  left距离左边的距离      
      right距离右边的距离
垂直   
   top距离上边的距离   
   bottom距离下边的距离

绝对定位：

position:absolute

特点：

页面中不占位置，脱离了标准流
配合方位属性实现移动
祖先元素中没有定位，默认相对于浏览器可视区域进行移动

祖先元素中有定位，相对于最近的有定位的祖先元素进行移动

相对定位：

position: relative;

特点：

配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置–没有脱标

应用场景：

子绝父相
用于小范围的移动

子绝父相：

让子元素相对于父元素进行自由移动

含义：

子元素：绝对定位
父元素相对定位

好处：

父元素相对定位，对页面布局影响最小

静态定位：

静态定位是默认值，就是之前认识的标准流

position:static

静态定位是之前的标准流，不能通过方位属性进行移动

固定定位：

相对于浏览器进行定位移动

position:fixed

特点:

配合方位属性实现移动
相对于浏览器进行移动
在页面中不占位置–脱离标准流

场景：

让盒子固定在屏幕中的某个位置

元素的层级关系：

不同布局方式元素的层级关系：

定位>浮动>标准流

不同定位之间的层级关系：

相对，绝对，固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素

更改定位元素的层级：

z-index:数字; 数字越大，层级越高

字体图标：

阿里：

https://www.iconfont.cn/

代码下载下来，在指定位置设置个元素，代入class类名即可

ICOMOON:

https://icomoon.io/

/*声明字体图标*/
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?4ahty3');
    src: url('fonts/icomoon.eot?4ahty3#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?4ahty3') format('truetype'),
        url('fonts/icomoon.woff?4ahty3') format('woff'),
        url('fonts/icomoon.svg?4ahty3#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
例如：
.icomoon::before {
    font-family: 'icomoon';
    content: '\e947';
    color: red;
    font-size: 10px;
    vertical-align: middle;
}

步骤：

查找图标----> 把图标添加入库—>点购物车–>下载代码

vertical-align对齐：

垂直对齐方式：

基线:浏览器文字类型元素排版中存在用于对齐的基线

在这里插入图片描述

作用：解决行内/行内块元素垂直对齐问题

项目中解决得问题:

图片和文字得垂直对齐：

<div class="box">
    <img src="./img/ewm.png" alt="" border="1" />
    浏览器文字类型元素排版中存在用于对齐的基线
</div>

img {
    vertical-align: baseline;
}

文本框和按钮无法对齐问题：

<div class="mian">
    <input type="text" />
    <button>按钮</button>
</div>

.mian input {
    height: 30px;
}
.mian button {
    height: 36px;
    vertical-align: middle;
}

input和img无法对齐问题：

<div class="one">
    <img src="./img/ewm.png" border="1" alt="" />
    <input type="text" />
</div>

.one input {
    vertical-align: middle;
}

div中得文本框，文本框无法贴顶得问题：

<div class="two">
    <input type="text" />
</div>

.two {
    width: 200px;
    height: 200px;
    background-color: yellow;
}

.two input {
    vertical-align: top;
}

div不设置高度由img标签撑开，img标签下面会存在额外间隙问题：

<div class="three">
    <img src="./img/ewm.png" alt="" />
</div>

.three {
    background-color: blue;
}

.three img {
    vertical-align: bottom;
}

使用line-height让img标签垂直居中：

<div class="four">
    <img src="./img/ewm.png" alt="" />
</div>

.four {
    line-height: 200px;
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.four img {
    vertical-align: middle;
}

边框圆角：

border-radius: 数字+px/百分比；

圆形：

border-radius: 50%;

隐藏：

让元素本身在屏幕中不可见，鼠标：hover之后元素隐藏

visibility：

隐藏后还占位置

visibility: hidden;

显示visibility: visible;

display：

隐藏后不占位置

display:none;

显示display:block;

光标类型：

设置鼠标光标在元素上显示的样式

cursor

default  默认值，通常是箭头
pointer  小手效果，提示用户可以点击
text    工字型，提示用户可以选择文字
move   十字光标，提示用户可以移动

overflow溢出部分显示效果：

溢出部分：盒子内容部分所超出盒子范围的区域

场景：控制内容溢出部分的显示效果: 如：显示，隐藏，滚动条…
overflow

visible  默认值，溢出部分可见
hidden   溢出部分隐藏
scroll   无论是否溢出，都显示滚动条
auto    根据是否溢出，自动显示或隐藏滚动条

属性选择器：

通过元素上的HTML属性来选择元素，常用于选择input标签

E[attr]  选择具有attr属性的E元素
E[attr="val"]  选择具有attr属性并且属性值等于val的E元素

选择器总结:

基本选择器：
   通配符选择器  *
   元素选择器    p{}
   id选择器     #id值{}
   类选择器      .class值{}
复合选择器
   后代选择器   .main p{}
   子代选择器   .main>p{}
   群集选择器   body,html{}
   交集选择器   li.active{}  从li标签中选择class="active"   <li class="active"></li>
伪类选择器  用于超链接时要注意顺序：  LVHA
   :link
   :visited
   :hover
   :active
   ：focus  选中元素获取焦点时状态 用于表单控件
   ：nth-child(n)
   :nth-of-type(n)
伪元素选择器
   ::before
   ::after
属性选择器
  E[attr]
  E[attr="Val"]

精灵图：

雪碧图/精灵图  把很多个小图拼接承一个大图
  性能问题  缓解服务器的压力
background: url(../img/icon.png) no-repeat 0px -977px;

CSS3：

在这里插入图片描述

文字阴影：

p {
    font-size: 60px;
    font-weight: bold;
    /* 文字阴影 
    text-shadow：h-shadow  v-shasow blur color；
    h-shadow：必需  水平阴影的位置  可以是负值（阴影在左边）  为正值（阴影在右边）
    v-shasow  必需  垂直阴影的位置  可以是负值（阴影在顶边）  为正值（阴影在底边）

    blur 可选 模糊的距离 只能是正值
    color  可选  颜色
    */
    text-shadow: 5px 5px 5px #f00;
}

盒子阴影：

.box {
    width: 300px;
    height: 300px;
    background-color: yellow;
    /* box-shadow: length length length length color inset;
    阴影离开盒子的横向距离
    阴影离开盒子的纵向距离
    阴影的模糊半径
    阴影的延伸半径(可省略)
    颜色
    是否使用内阴影(可省略 默认是外阴影)
    注意：顺序不可以改变
    */
    box-shadow: 1px 1px 1px 1px #f00 inset;
}

背景的显示范围：

.box {
    width: 300px;
    height: 300px;
    border: 40px solid;
    padding: 60px;
    background: url(./img/bd2.png) no-repeat;
    /* 
    border-box 背景被裁剪到边框盒  *
    padding-box背景被裁剪到内边距框
    content-box背景被裁剪到 内容框
    */
    background-clip: padding-box;
}

绘制背景图像的起点：

.box {
    width: 300px;
    height: 300px;
    border: 40px solid yellow;
    padding: 60px;
    background: url(./img/bd2.png) no-repeat 0px 0px;
    /* 
    border-box 背景图片相对于边框盒来定位
    padding-box背景图片相对于内边距框定位
    content-box背景图片相对于内容框定位
    */
    background-origin: content-box;
}

区别：

background-origin 控制元素背景图片的定位点 background-position的起始位置

background-clip控制元素背景图片的(background-image)展示区域

背景图片的尺寸:

.box {
    width: 600px;
    height: 600px;
    border: 40px solid yellow;
    padding: 60px;
    background: url(./img/dw1.png) no-repeat;
    /* background-size:宽度  高度 
    只设置一个值，第二个值会被设置为auto
    */
    /* background-size: 100px; */

    /* 百分比 
    以父元素的百分比来设置背景图的宽度和高度
    只设置一个值，第二个值会被设置为auto
    */
    /* background-size: 50%; */
    /* cover   背景图完全覆盖背景区域  会导致图片失真*/

    /* contain  保持背景图像本身的宽高比例 */
    background-size: contain;
}

小刘私坊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS学习笔记

CSS样式：内联样式：<h1 style="color: red; background-color: yellow">一级标题</h1><p>段落标记</p&g
复制链接

扫一扫