CSS学习笔记

最新推荐文章于 2024-04-26 16:58:59 发布
最新推荐文章于 2024-04-26 16:58:59 发布
阅读量389 收藏 2
点赞数 2
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36752532/article/details/118163666
版权

CSS学习笔记

1.css三种引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <!-- 1.外链式 -->
    <link rel="stylesheet" href="./css的三种引入方式.css">
    <!-- 2.内嵌式 -->
    <style> 
        div{
            color:green;
           }
    </style>
</head>
<body>
    <!-- 3.行内式 -->
    <div style="color: blue;font-size: 20px;">111</div>
</body>
</html>

2.选择器的类型

  1. 元素(标签)选择器
    • 格式： 标签名{ }
p{
	color:red;
}
  1. id选择器
    • 格式： #id名称{ }
    • id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值（重复不报错）
    • 类名的命名规则
      由数字、字母、下划线、中划线组成，但是不能以数字或者中划线开头
      命名尽量需要有意义
#father-id{
       color: yellow;
}
  1. 类选择器
    • 格式： .class类名{ }
    • class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
    • 类名的命名规则
      由数字、字母、下划线、中划线组成，但是不能以数字或者中划线开头
      命名尽量需要有意义
.father{
     color: yellow;
}
  1. 通配符选择器
    • 格式： * { }
    • 作用：选择所有标签
    • 一般用于消除盒子的内外边距
    • 针对于大型的项目，一般不会使用通配符选择器，可能会比较消耗浏览器的性能
*{
     padding:0;
     margin: 0;
}
  1. 伪类选择器
结构伪类选择器作用
E:first-child在子类中，选择E类型的第一个子元素 在所有子类中寻找，如果第一个子元素不是E类型元素，则找不到
E:last-child在子类中，选择E类型的最后一个子元素 在所有子类中寻找，如果最后一个子元素不是E类型元素，则找不到
E:nth-child(n)在子类中，选择E类型的第n个子元素 在所有子类中寻找，如果第n个子元素不是E类型元素，则找不到
其中 n 取 0 ,1, 2, 3 …
n = 2n /even 选择所有偶数位置
n = 2n+1 / old 选择所有奇数位置
n = -n+5 选择前5个子类 其中 -n 一定要写在前面
n = n+5 选择第5个之后的所有元素
E:first-of-type在子类中，选择E类型的第一个子元素
E:last-of-type在子类中，选择E类型的第一个子元素
E:nth-of-type(n)在子类中，选择E类型的第一个子元素
E:not(n)除了n元素之外的所有元素
a:link未被浏览过的a链接，正常的a链接
a:visited被浏览过的a标签，只能修改颜色
E:hover鼠标被覆盖的状态
E:active鼠标被点击的状态
  1. 属性选择器
属性选择器作用
p[ title = abc ]选择含有 title 属性值为abc的p选择器
p[ title = ^abc ]选择以 title 属性值abc 开头的p选择器
p[ title = $abc ]选择以 title 属性值abc 结尾的p选择器
p[ title = *abc ]选择 title 属性值中 含有 abc的p选择器
  1. 关系选择器
关系选择器作用
父子选择器父元素>子元素
div>p .text_input>.name_input
祖先后代选择器祖先 后代
div p
兄弟选择器p+span 选择p标签后面紧挨着的span元素
p~span 选择p后面所有的span元素
  1. 复合选择器
复合选择器作用
交集选择器选择器1选择器2选择器3{}
选中同时满足选择器1选择器2选择器3的元素（需要紧挨着)
并集选择器选择满足任意一个选择器的元素
格式：选择器1,选择器2,选择器3{}

3.伪元素

伪元素是 用css模拟来的一个标签 默认是行内元素

伪元素作用
E::before在E元素（父级）的所有子元素之前的位置添加的标签 一定要写content属性 如果不写的话不生效
E::after在E元素（父级）的所有子元素之后的位置添加的标签 一定要写content属性 如果不写的话不生效
E::first-letter选择第一个元素
E::first-line选择第一行
E::selection元素被选择的状态
E::placehoder设置placeholder内的样式

.father::before{
            content: "我在第一个元素之前，默认是行内元素";
            color:red;
        }
.father::after{
            content:"我在最后一个元素之后，默认是行内元素";
            color: red;
        }

4. 选择器的权重、继承性、层叠性

4.1 单选择器的权重

  • 单个选择器的权重：
    继承样式 < 通配符选择器 < 标签选择器 < 类与伪类选择器 < id选择器 < 行内样式 <!important

4.2 复合选择器的权重

复合选择器的权值

单选择器权值
行内样式1,0,0,0
id选择器0,1,0,0
类与伪类选择器0,0,1,0
标签选择器0,0,0,1
通配符选择器0,0,0,0
继承样式没有优先级

-复合选择器的权重计算：

  1. 计算规则： 相加规则，无法进位，数值越大，权重越大
  2. !important 的优先级最大 ，但是无法提升继承的优先级
  3. 并集选择器的计算 是单独计算每个选择器
  4. 优先级相同时，比较层叠性

4.3. 继承性

  1. 子承父业：子元素有默认继承父元素样式的效果
  2. 可以继承的属性有
    • font-
    • text-
      -line-height
    • color
  3. 继承的应用
    • 去除列表默认的样式（小圆点）ul { list-style：none； }
    • 统一不同浏览器默认文字大小，谷歌浏览器默认文字大小：16px
      不同浏览器可能显示的默认字体大小不一致，开发的时候通常会给body标签设置统一的font-size保证不同浏览器效果一致
  4. 继承失效的特殊情况
    1. a标签的颜色会继承失效 , 其实已经继承下来了，但是被浏览器默认设置的样式给覆盖掉了
    2. h系列标签的font-size会继承失效 , 其实已经继承下来了，但是被浏览器默认设置的样式给覆盖掉了
    3. div的高度不能继承，但是宽度有继承的效果 ,因为div有独占一行的特性

4.4. 层叠性

前提：只有当优先级相同是，此时才会比较层叠性

  1. 层叠覆盖：给同一个标签设置了相同的属性 , 此时样式会覆盖 , 最后写在下面的会生效
  2. 层叠叠加：给同一个标签设置了不同的样式 , 此时样式会叠加 ,最后会共同作用在标签上

5. 盒子模型

盒子模型

  1. 盒子的宽度 ： 左边框（border-left） +左内边距(padding-left) + 内容区域（content）+右内边距（padding-right）+ 右边框（border-right)
  2. border padding 的变化，会改变盒子的实际大小
    解决方法：自动内减box-sizing:border-box; 设置border padding不会扩大盒子大小，但是会自动改变内容区的大小
  3. 属性 ：height width 设置的是content区的大小

5.1 盒子边框

边框属性作用取值
border-style边框样式dotted(虚线) / solid（实线）/ dashed(点状)
border-color边框颜色red / #333 / rgba(0 , 0 , 0 , 0.5)
border-width边框宽度数值+px
boder-radius边框角边距数值+px / 50%(盒子的宽度)

连写 border:width style color;

/* border 属性 */
.box{
	border-style:dotted;
	border-color:red;
	border-width:2px;
	border:1px solid red;
	boder-radius:50%
}

5.1.1 border-radius画三角形

/* border-radius画三角形 */
.box2{
	width:0;
	height:0;
	border-left:20px solid rgba(0, 0,0,0);
	border-right:20px solid rgba(0, 0,0,0);
	border-top:20px solid rgba(0, 0,0,0);
	border-bottom:20px solid rgba(0, 0,0,1);
	
}

5.2 盒子内、外边距

  • padding(内边距)的用法与 margin(外边距)的用法一样
  • 可以单独使用margin-left/top/bottom/right
  • 特殊用法：对于有宽度的块级元素的 实现水平居中 在其块级元素本身添加 margin:0 auto;
  • margin或padding的四种取值情况
  • 行内元素的margin/padding垂直方向属性 无效
margin或padding取值含义
margin：1px 2px 3px 4px；上1px , 右2px ,下3px ，左4px
margin：1px 2px 3px ；上1p x, 左右2px , 下3px
margin：1px 2px；上下1px , 左右2px
margin：1px；上下左右1px
.box{
	margin-left:10px;
	margin-right:10px;
	margin-top:10px;
	margin-bottom:10px;
	margin:10px 20px; 
}

5.3盒子的合并现象

  • 合并现象：垂直布局的块元素 ，上盒子margin-bottom与下盒子margin-top具有重叠现象
  • 解决方法：只给其中一个盒子设置就可以了

5.4 盒子的塌方现象

  • 塌方现象：互相嵌套的块元素，父子元素的margin-top会叠加在一起
  • 解决方法：（原理：分离父子盒子的上边距）
    1. 设置父元素的boder-top 或者是padding-top 用来分离父子元素的margin-top
    2. 设置父元素的 overflow:hidden属性（将父级改为BFC盒子）
    3. 修改父元素的类型：display:inline-block;
    4. 设置父盒子或子盒子浮动
    5. 伪元素

6. 浮动

6.1 浮动的作用及特点

格式： float: left(左) / right(右);

  1. 浮动的作用： 让块级元素水平布局
  2. 浮动的元素 显示模式会变为：行内块元素的显示，但是无行内块的间隙( chrom中会显示block)
  3. 浮动的显示特点：

    1. 一行多个，可以设置宽高 （元素之间无间隙）

    2. 浮动的脱标：

      • 脱离标准流，不在文本流里占位置，会覆盖标准流中 块级元素的位置
      • 如有其他兄弟（行内元素/行内块元素）按浮动优先，顺序(文档流)排列
        具体情况：子盒子浮动 会与 其兄弟元素（input 、img、文本）水平排列
      • 同时也脱离了父元素的位置（可能会导致父元素高度变小）

    3. 浮动跟随：浮动的元素自动找上一个浮动的元素

    4. 浮动的元素受到上方元素边界的影响,无法超过

    5. 现在的浮动基本都为闭合浮动，就是子元素浮动的空间是父元素

6.2 清除浮动

6.2.1 为什么要清除浮动

  • 因为要用到元素的水平布局，所有使用了浮动，浮动会使目标元素脱离文档流，那么目标元素就无法撑开父元素的高度，不利于下面的元素布局
  • 元素的水平布局可以用display:inline-block；，但是这种方式会使元素之间存在间隙，这个间隙是写源代码回车所导致的

6.2.2清除浮动的方法

  1. 直接给浮动元素的父元素==设置固定高度 == 缺点：有些特定场景无法设置其父元素的高度
  2. == 额外标签法==：在浮动元素的父元素内容的最后添加一个块元素，并给这个块元素设置clear:both; 属性 缺点：会额外增加html的结构
  3. 单伪元素清除法： 在浮动元素的父元素内容最后添加一个伪元素，设置为块级，并且加上clear:both;
    通常使用clearfix类名去设置
    实际开发时使用 如果content内容有字符 需要清除额外字符的影响 content字符是为了兼容一些浏览器将其无内容的便签忽略的问题
/*  单伪元素清除法  */
.clearfix::after{
        content:".";
        display: block;
        clear: both;
        /* 如果content内容有字符  需要清除额外字符的影响    content字符是为了兼容一些浏览器将其无内容的便签忽略的问题*/
        height: 0;
        visibility:hidden;
}
  1. 双伪元素清除法: 在浮动元素的父元素添加此类可以消除浮动 这种方法也可以用来解决margin的塌陷问题，直接在父级盒子添加此类
 /* 双伪元素清除法 */
 .clearfix2::before,
 .clearfix2::after{
     content: "";
     display: table;
 }
 .clearfix2::after{
     clear:both;
 }

6.3 BFC盒子

  • 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

  • 创建BFC方式

    • 1、html标签
    • 2、浮动元素
    • 3、overflow取值不为visible
      如：overflow:hidden

  • 特点

    • BFC是一种块级元素的布局空间，在BFC这个布局空间中存在以下两个特点：
      • 1、BFC盒子会默认包裹住内部子元素（标准流、浮动）
        应用：清除浮动
      • 2、BFC盒子与子元素之间不存在margin的塌陷现象
        应用：解决margin的塌陷

7. 定位

应用场景：

  1. 解决盒子层叠问题 ，定位的元素层级最高
  2. 但盒子固定在屏幕某侧
  3. 定位和浮动作用冲突时 定位生效

7.1 静态定位

  • position:static;默认值 就是标准流的 无法使用偏移值

7.2 绝对定位

  • 格式: position:absolute;
  • 优点：不再占用页面位置，方便兄弟元素布局
  • 特点:
    - 浏览器中不占位置（脱标）脱标之后宽高由内容撑开
    - 绝对定位后,元素显示模式类似 行内块元素
    - 祖先元素中无定位，绝对定位的子元素相对于浏览器的可视区域进行移动
    - 祖先元素中有定位，绝对定位的子元素相对于 最近的 有定位的 祖先元素

7.3 相对定位

  • 格式:position:relative
  • 特点: 相对自已之前的位置进行偏移 （盒子还占用原来的位置）

7.4 固定定位

  • 格式: position:fixed;
  • 特点: 相对于浏览器可视区域, 固定定位后 元素脱标

7.5 子绝父相

  • 含义:子元素绝对定位，父元素相对定位
  • 作用: 元素水平居中
    • 父元素还占有文档流中的位置（方便下方的盒子的布局） 子元素不占文档流中的位置（方便同级的盒子布局）

7.5.1 子绝父相 - 水平居中

  • 元素水平居中(自适应 父子盒子的宽度)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父相-水平居中</title>
    <style>
     /*步骤
        1. 子绝父相
        2. 子盒子 向右移动 父盒子宽度一半的距离    left:50%;   这个百分号相对于是父盒子
        3. 子盒子 向左移动  自身宽度一般的距离    transform:translateX(-50%)   这个百分号是相当于子盒子  */
    div{
        border: 1px solid black;
    }
    /* 父盒子 相对定位 */
    .father{
        width: 400px;
        height: 400px;
        background-color: pink;
        position: relative;
    }
    /* 子元素  绝对定位 */
    .son{
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        position: absolute;
        /* 右移动 父盒子宽度的百分之50 */
        left: 50%;
        /* 左移动 子盒子宽度的百分之50 */
        transform: translateX( -50% );
    }
    </style>
</head>
<body>
    <div class="top">我是顶部</div>
    <div class="father">
        <div class="son">我是绝对定位的盒子</div>
    </div>
    <div class="bottom">我是底部</div>
</body>
</html>

7.5.2 子绝父相 - 垂直居中

  • 元素垂直居中(自适应 父子盒子的宽度)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父相-垂直居中</title>
    <style> 
    /* 步骤：
        1. 子绝父相
        2. 子盒子 向下移动 父盒子高度一半的距离    top:50%;   这个百分号相对于是父盒子
        3. 子盒子 向上移动  自身高度一般的距离    transform:translateY(-50%)   这个百分号是相当于子盒子
     */
    div{
        border: 1px solid black;
    }
    /* 父盒子 相对定位 */
    .father{
        width: 400px;
        height: 400px;
        background-color: pink;
        position: relative;
    }
    /* 子元素  绝对定位 */
    .son{
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        position: absolute;
        /* 下移动 父盒子高度的百分之50 */
        top: 50%;
        /* 上移动 子盒子高度的百分之50 */
        transform: translateY( -50% );
    }
    </style>
</head>
<body>
    <div class="top">我是顶部</div>
    <div class="father">
        <div class="son">我是绝对定位的盒子</div>
    </div>
    <div class="bottom">我是底部</div>
</body>
</html>

7.5.2 子绝父相 - 绝对居中

  • 元素垂直水平都居中（自适应父子盒子的宽高度）
  • 注意：transform：属性只生效一个（层叠覆盖） 所以要使元素 绝对居中 不可分开写 要连写 transform:translate(-50% , -50% );
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父相-绝对居中</title>
    <style> 
    div{
        border: 1px solid black;
    }
    /* 父盒子 相对定位   占位置 */
    .father{
        width: 400px;
        height: 400px;
        background-color: pink;
        position: relative;
    }
    /* 子元素  绝对定位     不占位置  转换为行内元素*/
    .son{
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        position: absolute;
        /* 右移动 父盒子宽度的百分之50 */
        left: 50%;
        /* 向下移动 父盒子高度的百分之50 */
        top: 50%;
        
        /* 左移动 子盒子宽度的百分之50 
            上移动 子盒子高度的百分之50
        */
        transform: translate( -50% ,-50% );
    }
    </style>
</head>
<body>
    <div class="top">我是顶部</div>
    <div class="father">
        <div class="son">我是绝对定位的盒子</div>
    </div>
    <div class="bottom">我是底部</div>
</body>
</html>

7.6 定位的层级关系

  • 标准流 < 浮动 < 定位
  • 不同定位之间层级是一样的 ，html中代码顺序越靠下 权重越大
  • 用z-index 来设置 定位元素的层级

8. 行内元素与行内块元素垂直对齐方式

  • 文字对齐方式
    在这里插入图片描述
    由于图片与文字对齐说基线对齐 所以存在对不齐的效果

8.1 vertical-align 垂直对齐方式

  • 作用: 解决行与行内块元素对不齐的情况
属性值效果
baseline基线（默认）
top顶线对齐
middle中线对齐
bottom底线对齐

  • 解决文本框和表单按钮无法对齐问题

  • 文本框无法贴顶 vertlcal-align:top

  • div包裹img元素，div被撑大 因为基线对齐，要预留一定高度放基线以下部分，所以块元素包裹行内块元素，高度会被撑大

        1. 改变img标签的垂直对齐方式不伪baseline
    2. 设置img 为块级元素

  • vertical-align配合使用inline-height属性使img标签 垂直居中

8.2 行内块元素的水平对齐方式

  • 问题
    • 默认是一行中排列, 由于代码中的回车/空格等原因 ,存在间隙
    • 由于行内块垂直对齐方式是基线对齐 ,存在与文字对不齐的情况
  • 解决方法
    • 设置行内块元素属性vertical-align="middle"解决
    • 浮动（推荐)

9. 元素隐藏

  • overflow: 隐藏 元素内容超出盒子大小的部分 可以将盒子变为BFC盒子
visible溢出部分可见 （默认值）
hidden隐藏内容
scroll无论内容有没有超过父元素边框 都会显示滑动栏
auto若有内容超过父元素框高度 会显示滑动栏 （自适应显示）
  • visibility: hidden 隐藏元素本身 仍占位置
  • display: hidden 隐藏元素本身 不占位置 （相当于注释）

10. 常用属性汇总

10.1 文字相关

属性作用取值
font-style文字样式（斜体） /normal（普通）
font-weigh文字粗细100-900/normal（普通）/bold（加粗） 其中400为normal 或者700为bold
font-size文字大小数值+px
font-family文字系列1.无称线字体 sans-serif（粗细均匀）
2.衬线字体 serif (有笔锋，宋体，Times New Roman)
3.等宽字体 monospace (代码，Consolas , fira code) 多段英文字体要加引号
保底措施：写多个取值+字体系列
line-height行高数值(文字倍数) / 数值+px
对于单行文本有垂直居中效果
设置 body{ line-height:1; } 可以使文字内容紧贴着标签的左上边框
  • 连写：font:（style）（weight） size / (line-height) family;强制顺序

10.2 文本属性

属性名作用取值
text-indent文本缩进数值+px/数值+em
text-decoration文本描述线overline(上划线)/ line-through(删除线)/ underline(下划线)/ none（无）
text-align文本位置left(水平居左) / center(水平居中) /right(水平居右)
对文本、行内元素、行内块元素 水平居中，需要对其父级元素添加该属性

10.3 背景相关属性

属性名作用取值
background-color背景颜色rgb(0,0,0) / rgba(0,0,0,0) / red / #fff
通常布局时加上
background-image背景路径url(路径)
background-repeat背景平铺no-repeat(不平铺) /repeat-x(x轴方向平铺)/repeat-y(y轴方向平铺)/repeat（整个box平铺）
background-position背景位置background-position: 水平方向 垂直方向
水平方向：left / center / right / 数值+px
垂直方向：top / center / bottom / 数值+px
若只写一个取值 默认垂直方向为center

10.4 光标属性

光标属性cursor取值作用
default箭头
pointer小手 、提示用户可以点击
text工字形、提示用户可以选择文本或输入
move十字形 、提示用户可以移动

10.5 元素整体透明度

  • 特殊情况:当设置opacity:0时，此时元素完全透明，有元素隐藏的效果
属性取值
opacity0~1之间
0 完全透明
1 完全不透明

10.6 阴影

10.6.1 文字阴影

连写：text-shadow: h-shadow v-shadow (blur) (color)

属性名取值及作用
h-shadow必须 水平偏移值，允许负值
v-shadow必须 垂直偏移，允许负值
blur可选，模糊度
color可选 ， 阴影颜色
p{
	text-shadow: 10px 10px 10px red;
    /*可以写多组阴影：用逗号分隔*/
    text-shadow: 10px 10px 10px red , 20px 20px 5px green;
}

10.6.1 盒子阴影

连写：box-shadow: h-shadow v-shadow (blur) (color) （inset）

属性名取值及作用
h-shadow必须 水平偏移值，允许负值
v-shadow必须 垂直偏移，允许负值
blur可选，模糊度
color可选 ， 阴影颜色
insetinset:将阴影改为内部阴影

10.7. 精灵图

  1. 一个图片中有多个小图片
  2. 步骤：
    • 设置盒子大小为logo大小
    • 设置盒子背景为精灵图
    • 设置精灵图logo位置左上(x,y) background-position:（-x,-y）;
  3. background-size：宽 高; 背景图的大小
    • background-size：宽 高; 或者为特殊值
    • 连写 ：background :color image repeat position / size
特殊值作用
contain等比例缩放 不会超过盒子的最大（会留白）
cover等比例缩放 直到刚好填满盒子没有空白
  1. 存在覆盖问题
  • 代码实例
.box{
	/* 背景图片的宽高为盒子的宽高 */
	background-size:100%;
	/* 背景图片取特殊值 */
	background-size:contain;
	background-size:cover
	/* 盒子与背景logo大小一致*/
	background: url(./1.png) -100px -200px/100%;

}

10.8. 过渡

  • 设置元素从一个状态变化到另外一个状态，属性变化的时间

  • 一般配合状态伪类选择器 :hover

  • transition: 过渡的属性 过渡的时长;

    • 过度的属性 ： all 所有的能过渡的属性都过度/ 要过渡的属性名
    • 过度的时长： 1s
    • 可以设置多组用 ， 隔开

  • transition 在不同状态中效果不同 设置的状态不同 效果不同

    • 在默认属性中设置，状态开始，状态结束（鼠标移入移出）都有效果
    • 在状态伪类选择器中使用 只有状态开始有效果（鼠标移入）

  • 代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 鼠标移入有效果 */
            transition: width 5s , height 3s;
        }

        .box:hover{
            width: 400px;
            height: 400px;
            background-color: aqua;
            border-radius: 50%;
            /* 鼠标移入有效果 */
            /* transition:all 2s; */
        }
        .box:active{
            width: 300px;
            height: 300px;
            background-color: #ccc;
            /* 设置所有属性变化   */
            transition: all 10s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

11. 2D转换-transform

  • 不会影响其他元素的布局（类似相对定位）
  • 同时使用缩放-旋转-平移需要连写固定顺序：transform:translater rotate scale
  • 特殊情况：transform:rotate translater scale当第一个取值为时，会动态的改变XY轴的位置方向

11.1 缩放scale

  • 盒子整体缩放，内容也跟着缩放
  • 缩放的中心点是固定的
  • 转换的原点：transform-origin: 方位名词/坐标点（与background-position的用法相同）
scale属性取值含义及作用
scaleX( x )宽度扩大x倍（x为倍数）
scaleY( y )高度扩大y倍（y为倍数）
scale( x ,y )宽度扩大x倍，高度扩大y倍

11.2 旋转retato

  • 转换的原点：transform-origin: 方位名词/坐标点（与background-position的用法相同）
rotate属性取值含义及作用
rotate( 90deg)顺时针旋转90度

11.3 平移translate

translate属性取值含义及作用
translateX( x )沿X轴平移 x px (x的取值为数字+px 或者为元素本身百分比)
translateY( y )沿Y轴平移 y px (x的取值为数字+px 或者为元素本身百分比)
tanslate( x , y )沿X轴平移 xpx, 沿Y轴平移 ypx

12. 3D效果

要实现3D效果有两种方式

  • 给需要3D效果的子元素的父元素添加 视距 perspective:1000px;使子元素具有近大远小的3D效果,但是本质还是平面
  • 让元素成为3D图形,给需要3D效果的元素本身添加transform:preserve-3d
  • 可以同时使用两种方式

12.1 视距 perspective

  • 作用：让子元素有近大远小的效果
  • 注意点：给子元素的父元素设置
  • 取值：观察者的眼睛离元素的初始平面的距离
    • 如果取值越大，则距离越大，效果越不明显
    • 如果取值越小，则距离越小，效果越明显
    • 一般取1000px左右

12.2 3D平移

  • 沿着Z轴方向移动具有3D效果
  • transform:translateX(200px) translateY(300px) translateZ(400px);可以缩写为:transform:translate3d(200px , 300px ,400px);

12.3 3D旋转

  • 沿着X轴或Y轴旋转具有3D效果
  • 沿Z轴旋转就就是平面旋转

13. 动画animation

  • 动画与过渡的基本区别
    • 过渡需要触发条件，动画不需要触发条件
    • 过渡有持续时间，动画可以设置无限时间
    • 过渡只能表示两个状态，动画可以表示n个状态

13.1 动画的基本使用

  • 每个状态要在上个状态的基础上发生改变
  • steps(步数) 是一个状态转换到另一个状态的步数，不是整个动画的步数（2个状态的情况下就是所有的状态）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 300px auto;
            /* 调用动画一 
                nimation: 动画名 持续时间 动画次数 速度模式
            */
            animation: div-animation1 1s infinite linear ;
        }
        /*方式一： 定义动画一 */
        @keyframes div-animation1{
            /* 开始状态 */
            from{
                
                transform: rotate(0deg);
            }
            /* 结束状态 */
            to {
                transform: rotate(36000deg);
                border-radius: 50%;
                color: skyblue;
            }
        }
        /* 方式二：  定义动画二 
        	每个状态要在上个状态的基础上发生改变
        */
        @keyframes div-animation2{
            /* 状态一 */
            0% {
                width: 300px;
            }
            /* 状态二 */
            50% {
                width: 500px;
            }
            /* 状态三 */
            100% {
                width: 500px;
                height: 500px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

13.2 动画的单个属性

animation的单个属性含义取值
animation-name动画的名字
animation-duration动画的持续时间
animation-timing-function动画的行为模式1.case (默认值)
animation-delay动画延时1. 1s、100ms
animation-iteration-count动画执行的次数1.infinite无限次
animation-direction动画的执行方向1.normal(默认值、由 from到to)
2.reverse 反转 (由 to 到 from)
3.alternate 交替执行 （第一次由 from 到 to ,第二次由to 到from）
animation-fill-mode动画的结束状态1.backwards (默认值) 结束之后回到初始状态
2.
animation-play-state动画的播放状态1.running(默认值)
2.puased暂停播放 （现阶段配合hover使用）
  • 连写animation：
  • 省略问题：name duration不能省
  • 顺序问题

14. iconfont的使用

使用字体图标步骤（下载后文件demo_index.html 为使用说明）：

  1. 在项目目录新建 fonts 文件夹，将字体图标文件内所有文件拷贝进 fonts 文件夹

  2. 在项目中通过 link 标签引入字体css文件 iconfont.css

    <link rel="stylesheet" href="fonts/iconfont.css">

  3. 通过i标签或者span标签上面设置需要对应类名来使用

    <i class="iconfont icon-refresh"></i>

注意：

  • 设置字体图标样式时，推荐使用iconfont类名找到标签。（注意层叠问题）
  • 不要改变字体图标的font-family，否则样式不生效

15. CSS3的私有属性

私有前缀是为了兼容老版本浏览器的写法

  • 新版本浏览器，能直接认识标准的css3新属性，无需添加私有前缀直接写即可

  • 部分老版本浏览器，只能认识带有私有前缀的CSS3新属性，此时需要添加私有前缀保证效果

私有前缀的作用: 兼容部分老版本浏览器

常见不同浏览器的私有前缀代码：

谷歌、苹果浏览器：-webkit-
火狐浏览器：-moz-
IE浏览器：-ms-
欧朋浏览器：-o-

例如：

div {    
    width: 200px;    
    height: 200px;    
    background-color: pink;    
    margin: 100px auto;    
    /*谷歌浏览器和safari浏览器的前缀 -webkit-*/    
    -webkit-transform: rotate(45deg);    
    /*火狐浏览器的前缀 -moz-*/    
    -moz-transform: rotate(45deg);    
    /*ie浏览器的前缀 -ms-*/    
    -ms-transform: rotate(45deg);    
    /*opera浏览器的前缀 -o-*/    
    -o-transform: rotate(45deg);    
    /*规范阶段的标准写法*/    
    transform: rotate(45deg);
}

注意： 对于移动端来说，大多都是ios和Android的操作系统，浏览器内核都是webkit内核，所以前缀只需要写-webkit- 即可

真正开发中，前缀会通过自动化打包工具自动添加，不用程序员一个个加。

16.视口 viewport

早期电脑网页为了适配手机查看电脑的网页所设置

布局视口默认的宽度是980px ,手机上看会将980px宽的网页等比例缩小，手机窗口上显示

理想窗口：当布局视口与设备宽度保持一致时，网页显示效果最好

通过meta标签可以进行视口的设置

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
属性解释说明
width设置视口的宽度，device-width表示当前设备的宽度
user-scalable设置用户是否可以缩放，yes/no
initial-scale初识缩放比
maximum-scale最大缩放比
minimum-scale最小缩放比

17.二倍图

因为CSS的一个px对应电脑屏幕的一个物理像素点，对应移动端屏幕的多个像素点，要保证不失真，所有要使用多倍图

设备像素比：屏幕的物理像素：css中的像素 = 2 ：1

18. flex布局

添加父元素属性display:flex;，将父元素变为弹性盒子(flex容器)

  • 主轴： 默认水平向右
  • 侧轴： 默认垂直向下
  • 在弹性盒子中的子元素（flex项目）会默认沿主轴方向排布

18.1 主轴方向：flex-direction

flex-direction的取值han
row水平向右（默认值）
row-reverse水平向左
column垂直向下
column-reverse垂直向上

18.2 主轴、侧轴对齐方式

18.2.1主轴对齐方式：justify-content

justify-content的取值作用及含义
flex-start从主轴开始方向对齐
flex-end从主轴结束位置对齐
center居中对齐
space-around让空白环绕盒子显示
space-betwwen让空白只在盒子之间显示
space-evenly空白均分

18.2.1侧轴对齐方式

  • 单行侧轴对齐方式：align-items:
align-items:取值作用及含义
flex-start从侧轴开始方向对齐
flex-end从侧轴结束方向对齐
center居中对齐
streth拉伸显示(默认值)
  • 多行侧轴对齐方式： align-content:
align-content:取值作用及含义
flex-start从主轴开始方向对齐
flex-end从主轴结束位置对齐
center居中对齐
space-around让空白环绕盒子显示
space-betwwen让空白只在盒子之间显示
space-evenly空白均分

  • 单个元素侧轴对齐方式：align-self

    align-items:取值作用及含义
    flex-start从侧轴开始方向对齐
    flex-end从侧轴结束方向对齐
    center居中对齐
    streth拉伸显示(默认值)

18.3 换行

  • 注意：flex布局中，默认是单行显示的，如果子元素的宽度之和超出了父元素的宽度，此时子盒子会默认压缩显示。
  • 不换行时会强行改变盒子的宽度
  • 代码：flex-wrap:wrap
flex-wrap ：取值作用及含义
nowrap不换行（默认值）
wrap换行

18.4 分配子元素空间

  • 子元素自适应父元素的剩余空间-优先分配有宽度的子盒子
  • 代码：flex：份数

18.5 子元素排序

  • 设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0，可以为负值
  • 代码： order：数字;

18.6 flex布局元素的影响

18.6.1 flex 布局儿子元素的特征

  1. 当父元素为弹性盒时，儿子元素不在区分元素显示模式 ，所有的儿子元素都具有
    • 主轴方向由内容撑开，可以设置宽高
    • 孙子及孙子的后代元素无影响，还是遵循文档流的布局方式
    • 若子元素为单行，子元素的侧轴方向为弹性盒子的宽度或者高度 ,
  2. 当父元素为弹性盒时，儿子的后代元素如果是行内块元素，（会对多行均分有影响,其他行内跨元素可以设置好vertical-align:top;消除影响，img标签极其特殊，无法用vertical消除影响，也无法用display消除影响）
  3. 当父元素为弹性盒时，子元素flex的优先级高（浮动无效）
  4. 当父元素为弹性盒时，子元素的定位优先级高
  5. 当父元素为弹性盒时，子元素的box-sizing:border-box;沿主轴方向生效，沿侧轴方法失效
  6. 当父元素为弹性盒时，子元素的vertical-align、clear、float属性将失效

19. less

Less 是一门 CSS 预处理语言，也叫做css的预处理器。它扩展了 CSS 的写法，增加了变量、函数等特性。

less作为css的拓展，并没有减少css的功能，而是在现有的css语法中，加入了程序式语言的特性
less在css的语法基础上，引入了变量、运算以及函数等功能，大大简化了css的编写，并且减低了css的维护成本，正如其名字一样：less可以让我们用更少（less）的代码做更多的事情
当然，常见的css预处理器有：Less、Sass、Stylus

注意点：

  • 在less中，完全兼容css的语法，所以可以直接在less文件中写css没问题

  • 浏览器不认识less文件，需要需要使用less中的样式，需要先把less文件编译成.css文件，再使用！！

    index.less——》index.css——》再在html页面中引入css使用

19.1 环境搭建

1.插件库中安装 easy less

2.打开设置，往 settings.json 文件中添加less声明，可以指向编译完成后的css文件路径

“less.compile”: {
“out”: “…/css/”
}

19.2 less语法

less语法兼容css的所有语法

19.2.1 less语法的变量

语法：@变量名:变量值;

@ bgColor : #8df;
div{
    backgroundcolor:@bgColor;
}

19.2.2 less的嵌套

嵌套的结构与html 中的结构一样 &表示父级

<div class="father container">
    <div class="son1"></div>
    <div class="son2"></div>
</div>

.father {
	width:200px;
    height:200px;
    backgroundcolor:red;
    //后代选择器
    .son1 {
        width:100px;
        height:100px;
        backgroundcolor:skyblue;
    }
    //子代选择器
    >.son {
        width:100px;
        height:100px;
        backgroundcolor:skyblue;
    }
    //并集选择器    通过嵌套省略父级选择器
    .son1,
    .son2{
        width:100px;
        height:100px;
        backgroundcolor:skyblue;
    }
    //交集选择器  &表示父级选择器
    &.container{
        backgroundcolor:red;
    }
    //伪类选择器
    &:hover{
        font-size:15px
    }
    //伪元素
    &::before{
        content:"";
        display:block;
        width:20px;
        height:20px;
        backgroundcolor:red;
    }
}

19.2.3 less的简单计算

可以实现加减乘除

在 less 4.0 版本之后， 除法运算/ 如果在括号 () 外，不会执行除法，推荐使用 () 包裹即可

.box{
    width:200px + 100;
    width:200px - 100;
    width:200px * 100;
    width:(200px / 100);
    
}

19.2.3 less的函数

语法：.函数名( 参数1 ，参数2 ){重复的样式}

通常是抽取公共代码，减少代码冗余

//定义变量
@mainWidth:200px;
@mainHight:300px;
@mainBG:red;
//定义函数
.common( @x, @y , @z){
    width:@x;
    height:@y;
    background-color:@z;
};

.father{
    .common(@mainWidth , @mainHight , @mainBG);
    .son{
        width:100px;
        height:100px;
        background-color:skyblue;
    }
}

19.2.4 less 文件整合

less可以将多个css文件整合到一个css文件中，其他的css文件通过以下语法引入

@import '路径';

@import '../css/base.css';

20. rem布局

rem布局 就是让页面需要等比例缩放的元素（盒子的大小、文字的大小）都能做到跟随屏幕等比例缩放

  • 具体实施方法： 让页面都换上 rem 单位

  • 传统浮动+定位+宽度百分比（流式布局）/flex布局：都是针对于盒子宽度的适配变化，但是盒子的高度和文字的大小等是无法适配变化的

    在较大屏幕下看，盒子高度和文字大小不会变化，用户观感：盒子拉长了、盒子太扁，文字太小，效果不好

rem布局的基本原理：

  • 当屏幕越大，让html标签的font-size变大即可
  • 当屏幕越小，让html标签的font-size变小即可

em： 相对于当前元素的字体大小→ 1em = 当前标签的font-size

rem： 相对于根元素（html）的字体大小→ 1rem = html标签的font-size

20.1 rem布局首先进行适配工作

适配的步骤：

  1. 先适配设计图的屏幕大小（比如：750px），并且根据设计图屏幕大小定义一个html标签的font-size的大小（比如：50px），此时屏幕大小与font-size的比例为15
  2. 因为是等比例缩放的，所以每一个适配的屏幕大小与font-size的比例都是相同的，所以各个屏幕大小除以比例就能得出font-size的大小

20.2 vw单位

让元素跟随屏幕宽度进行等比例缩放
vw：1vw等于视口宽度的1%。
vh：1vh等于视口高度的1%

rem单位：

  • 把元素的px单位转换成rem单位

    rem代表的px值 = html标签的font-size变化

  • html标签的font-size不会自己变化，程序员需要手动通过媒体查询等方法设置不同屏幕下：html标签的font-size

    适配的代码比较麻烦，但也是可以复用的

vw单位：（自动适配单位）

  • 安装 px2vw插件

  • 把元素的px单位转换成vw单位

  • px = vw * 视口宽度的1%

  • 完事：浏览器会自动改变vw所代表的px值

    不用写适配的代码

21. 媒体查询

css3新增方法，动态的查询屏幕宽度，根据不同屏幕宽度设置样式是否生效

@media screen and (条件1) and (条件2) {    选择器......}

作用： 根据当前屏幕宽度是否满足条件——》控制其中的选择器是否生效

  • 如果条件满足，选择器生效
  • 如果条件不满足，选择器失效

条件：

条件含义解释
min-width样式生效的最小宽当屏幕宽度大于等于该宽度时，选择器样式才生效
max-width样式生效的最大宽当屏幕宽度小于等于该宽度时，选择器样式才生效
width样式生效的宽度当屏幕宽度正好等于该宽度时，选择器样式才生效

注意点：

  • 媒体查询只能控制选择器是否生效，不能提升选择器优先级！！

  • 媒体查询中可以同时设置多个条件，条件之间以and连接

  • 媒体查询语法格式中空格不要省略

22.less 与 rem布局与媒体查询-实现移动端屏幕适配

  • rem布局适配的步骤：

    1. 把px单位转换成rem单位
      rem = px / 当前屏幕下的html的font-size

    2. 通过媒体查询设置不同屏幕下的html标签的font-size（等比例缩放）
      比例 = 屏幕宽度 / html标签的font-size = 750 / 50 = 15
      html标签的font-size = 屏幕宽度 / 比例（15）

  • 使用 px2rem 插件时，要注意默认的比例为16px,要修改为50px


// 适配了：750 720 540 480 424 414 400 384 375 360 320

// 进行屏幕适配的函数
.adapter(@width) {
  @media screen and (min-width: @width) {
    html {
      // round(数字,保留的位数) 保留小数
      font-size: round((@width / 15), 2);
    }
  }
}

// 当屏幕小于320的时候，有兜底的font-size为50px
html {
  font-size: 50px;
}

.adapter(320px);
.adapter(360px);
.adapter(375px);
.adapter(384px);
.adapter(400px);
.adapter(414px);
.adapter(424px);
.adapter(480px);
.adapter(540px);
.adapter(640px);
.adapter(720px);
.adapter(750px);

23.响应式布局

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网页能够兼容多个终端（pc、手机、平板）

单独制作移动端页面方案（主流）：

同一个页面需要开发两套不同设备的版本

  • pc端需要开发写一套页面，专门给pc端看
  • 移动端再开发一套页面，专门给移动端看
  • 传统：浮动+定位+宽度百分比（流式布局）
  • flex布局
  • rem布局

响应式布局方案（较少）：

  • 只需要写一套代码，同时给pc端和移动端看

响应式开发的布局原理

通过媒体查询，针对于当前不同的屏幕宽度，自动改变页面中盒子的宽度、盒子的显示或隐藏等样式

23.1 设备屏幕的分类

在响应式开发中需要动态根据屏幕的宽度改变样式，但是不可能每变化1px就改变样式。

在响应式开发中，把各种屏幕宽度分为四大类，开发中只需要考虑这四种屏幕的情况即可

分类名称宽度范围
超小屏设备0 ~ 768px
小屏设备768px ~ 992px
中屏设备992px ~ 1200px
大屏设备1200px ~ 正无穷

23.2 使用媒体查询完成响应式布局容器

可以通过媒体查询实现不同终端的布局和样式的切换，完成响应式布局。

        .container {
            height: 2000px;
            margin: 0 auto;
        }

        /* 适配  0 - 768px   版心100% */
        @media screen and (max-width:768px) {
            .container {
                width: 100%;
                /* ps */
                background-color: burlywood;
            }
        }
        /* 适配  768 - 992px  版心 750px */
        @media screen and (min-width:768px) and (max-width:992px) {
            .container {
                width: 750px;
                /* ps */
                background-color: yellowgreen;
            }
        }
        /* 适配  992px - 1200px  版心970px */
        @media screen and (min-width:992px) and (max-width:1200px) {
            .container {
                width: 970px;
                /* ps*/
                background-color: palegreen;
            }
        }
        /* 适配  1200px以上的屏幕   版心1170px*/
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
                /* ps */
                background-color: green;
            }
        }

24. bootstrap框架

参考文档： bootstrap中文网

版本：

  • 2.x.x 停止维护

    做了很多兼容性处理，但是代码不够简洁，功能不够完善

  • 3.x.x 目前使用较多

    偏向于响应式开发布局，稳定。但是放弃了IE67的兼容，对IE8支持但是界面效果不友好

  • 4.x.x 阶段 最新版

注意点： Bootstrap中的 js功能效果依赖于 jQuery

24.1 简单使用

bootstrap框架就是别人写好的代码，类似于：需要使用别人写好的css文件，只需要直接引入即可

  • 引入文件：<link rel="stylesheet" href="bootstrap/css/bootstrap.css">

  • bootstrap样式文件中有一些简单的样式初始化，所以引入之后不用再引入 base.css 文件

    但是bootstrap并没有将所有样式都重置，所有之后还需要自己手动写代码重置

  • 学习bootstrap框架说白了就是学习类（学习每一个类的含义）

    比如：fl——》左浮动、fr——》右浮动、clearfix——》清除浮动

    以部分按钮为例：

    类名含义
    .btn按钮的基础类（按钮必加的类）
    .btn-success绿色按钮
    .btn-danger红色按钮
    .btn-primary深蓝按钮
    .btn-default白色按钮

24.2 bootstrap的布局容器

之前给一个盒子设置响应式布局（不同屏幕下版心不同，移动端宽度100%），代码写了很多很麻烦
但是使用bootstrap框架之后就非常方便，框架中响应式的框架已经写好的，使用的之后直接给标签加类即可

24.2.1 响应式布局容器（.container）

  • 设置了该类的盒子，在不同屏幕下有不同的版心，到了移动端宽度为100%（之前写的效果一样）

    • 超小屏幕：0-768px
    • 小屏幕：768px - 992px
    • 中屏幕：992px - 1200px
    • 大屏幕：1200px以上

    底层原理：媒体查询+rem布局实现的屏幕适配

  • 设置了该类的盒子，左右有默认15px的padding

流式布局容器（.container-fluid）

  • 设置了该类的盒子，宽度自适应，默认的方式
  • 设置了该类的盒子，左右也有默认15px的padding

24.2.2 抵消父元素padding的类（.row）

bootstrap中的布局容器默认都设置了左右15px的padding。

如果不需要这个效果，除了可以通过选择器padding:0;直接覆盖，还可以通过.row类去掉

  • 设置了该类的子盒子，会抵消父元素左右15px的padding

    底层原理：通过margin为负值实现

24.3 栅格系统

在bootstrap中会把一行分成12列，通过对应的类名实现每个盒子宽度的动态变化

24.3.1 栅格系统的模拟

需求： 响应式容器中有两个盒子，只在大屏设备中宽度各占一半一行中显示，其他屏幕占满一行

  • 使用之前的方法：浮动 + 宽度百分比 + 媒体查询 可以实现

  • 其实在bootstrap中，也可以通过类完成以上效果（如：给两个盒子设置.col-lg-6）

    底层原理也是通过：浮动 + 宽度百分比 + 媒体查询 做到的。

24.3.2 栅格系统的使用

bootstrap中将一行分成了12份（12份更容易分配盒子的空间）

底层原理： 浮动（一行中显示） + 百分比（宽度均分） + 媒体查询（不同屏幕时才生效）

比如：.col-lg-6 表示在大屏及以上屏幕生效，盒子宽度为一行的6/12——》50%；浮动在一行中显示

语法： .col-取值1-取值2

取值1效果
lg大屏及以上屏幕时生效
md中屏及以上屏幕时生效
sm小屏及以上屏幕时生效
xs超小屏及以上屏幕生效（所有屏幕生效）

取值2： 份数（0~12）

表示在一行中的宽度占几份

24.3.3 栅格系统的练习

需求:  响应式布局容器中一共有 12 个div
  如果是大屏幕设备, 每行放 6 个 div,  共两行
  如果是中屏设备,   每行放 4 个 div,  共三行
  如果是小屏设备,   每行放 3 个 div,  共四行
  如果是超小屏设备, 每行放 2 个 div,  共六行

.col-取值1-取值2
  lg：大屏及以上生效    large
  md：中屏及以上生效    middle
  sm：小屏及以上生效    small
  xs：所有屏幕都生效    extra small
  • 要引入bootstrap框架的css文件

    <div class="container">
        <ul>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
            <li class="col-lg-2 col-md-3 col-sm-4 col-xm-6"></li>
        </ul>
    </div>

24.4 响应式工具介绍

在响应式布局中，有时候会设置不同屏幕下元素的显示或者隐藏

需求： 一个盒子大屏、中屏显示，小屏、超小屏隐藏

  • 自己通过媒体查询实现

  • 使用bootstrap中预定的.hidden相关类实现

代码：

bootstrap中预定了一些类，可以控制盒子的显示或者隐藏

类名效果
.hidden所有屏幕都隐藏
.hidden-xs只在超小屏隐藏
.hidden-sm只在小屏隐藏
.hidden-md只在中屏隐藏
.hidden-lg只在大屏隐藏

24.5 组件

组件比全局样式会多出一些功能出来，但是注意这些功能需要配合js文件一起使用

组件：字体图标

在bootstrap内部，内置了字体图标，只需要直接复制粘贴类名即可

比如：

<span class="glyphicon glyphicon-heart"></span>

组件：导航条

bootstrap中已经写好导航条的代码，使用的时候直接复制粘贴即可

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

注意点：

  • 如果需要实现组件中如导航条的功能，需要引入bootstrap中的js文件才行
  • bootstrap中的js需要依赖与jquery这个js文件的，所以需要一起引入jquery这个js文件才能生效！
  • js文件通过script的src属性引入
青椒味半岛铁盒
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 学习笔记
09-25
首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
css学习笔记1
qq_42236791的博客
12-12 866
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 1898
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
css学习笔记
weixin_45085122的博客
11-13 1293
css
【CSS学习笔记】
weixin_45037690的博客
08-12 725
Cascading Style Sheet 层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、动画…浏览器兼容性。
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 320
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 690
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
SCSS的基本使用(一)
大圣归来圣骑士清欢的博客
04-22 511
SCSS的基本使用、语法
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1074
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1359
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
CSS文本样式
qq_41807399的博客
04-23 466
CSS中使用text-align属性来定义文本的水平的对其方式。left：左对齐right：右对齐center：居中对齐justify：两端对齐将块状元水平居中需要使用margin属性，将左右两边都设置成自动时，块状元素会自动居中。CSS使用vertical-align属性定义文本的垂直对齐问题auto属性值根据layout-flow属性值定义对齐对象的内容baseline：表示对象内容与基线对齐sub表示垂直对齐文本的下标super表示垂直对齐文本的上标。
深入探索CSS中的渐变艺术：线性渐变、径向渐变与锥形渐变详解
最新发布
艾恩小灰灰的博客
04-26 485
CSS渐变技术为网页设计带来了无尽的可能性，通过合理地运用线性渐变、径向渐变和锥形渐变，可以增强网页元素的视觉表现力，创造出生动多彩的用户体验。随着浏览器对CSS标准支持的不断升级，渐变效果的应用将更加广泛和灵活。记得在实际项目中检查浏览器兼容性，并根据需要添加相应的前缀以确保跨浏览器兼容。
PostCSS详细介绍
技术探秘者的博客
04-26 1000
PostCSS是一个强大的CSS处理工具，它可以用来转换、优化和格式化CSS代码。与传统的预处理器（如Sass和Less）不同，PostCSS不是一种新的CSS语法，而是一个基于JavaScript插件的工具，可以灵活地扩展和定制。本书将详细介绍PostCSS的原理、用法和常见插件，帮助读者快速掌握PostCSS的使用技巧和优化方法。
PostCss 概述
宁夏前端工程师，马卫斌，wx：1457508895
04-23 502
PostCSS 通过其灵活的插件架构，将 CSS 处理能力从单纯的样式编写扩展到了代码验证、现代化、优化等多个层面。它作为一个高度可定制的中间层，能够无缝衔接现有工作流，帮助开发者编写更高效、更易于维护、更具备前瞻性的 CSS 代码，同时确保了跨浏览器的兼容性。
CSS的布局模式
qq_60624992的博客
04-26 1284
虽然我们可以通过普通流来实现一行多个div，但是过于麻烦而且行块内存在缝隙，并且有很多的布局无法通过标准流来实现。优点：书写简单缺点：无意义标签较多导致结构化较差优点：简洁，方便缺点：溢出的内容无法显示出来优点：结构语义化缺点：IE6-7不支持，需要使用zoom：1优点：结构语义化缺点：IE6-7不支持，需要使用zoom：1。
css设置子元素在父元素中水平垂直居中
qq_39454432的博客
04-23 449
css设置子元素在父元素中水平垂直居中的方法
黑马程序员css笔记
08-18
- *1* *2* *3* [黑马程序员pink老师_CSS学习笔记](https://blog.csdn.net/weixin_46764819/article/details/123336658)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值