• CSS知识总结

     CSS(Cascading Style Sheets， 层叠样式表)设置版面的布局和外观显示样式，
    作用：让HTML从样式中脱离，专注做结构，实现结构(HTML)与样式(CSS)相分离。

    1. 创建CSS

    CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。

    1.内联样式：
    <div style="200px;height:100px;"></div>
     
    由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。

    2.内部样式：

    <style>
     div{
         200px;
         height:100px;
         border:1px solid black;
     }
    </style>

    当单个文档需要特殊的样式时，就应该使用内部样式表。

    3.外部样式：
    <head>
     <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。

    2. 选择器

    选择器就是把想要的标签选出来。

    2.1 基础选择器

    标签选择器: 不能差异化选则

    类选择器：可多次使用，推荐使用

    id选择器：只能使用一次

    通配符选择器：选择所有，不推荐

    不推荐使用无具体语义的选择器，如div和span，推荐类选择器及语义化标签如li、p等
     
    font有哪些样式：
    font-size，font-family, font-weight: [normal或400],  font-style: [normal, italic]
    外观属性：color, line-height, text-algin, text-indent缩进两个字2em, text-decoration:添加下划线underline或none

    2.2 复合选择器

    通过基础选择器的不同组合更精准选择元素。

    后代选择器：空格隔开，选择包含在内部的元素

    子代选择器：> 连接，选择下一级的元素

    交集选择器：p.one 即是...又是...

    并集选择器：逗号隔开，用于集体声明, 减少重复样式
    属性选择器：
    　　input[value] 有value属性的元素
    　　input[type=text] type属性的值为text的元素
    　　input[type=text] type属性的值为text的元素
    　　input[class^=value] class属性的值以value开始的元素
    　　input[class$=value] class属性的值以value结束的元素
    　　input[class*=value] class属性的值含有value的元素

    伪类选择器：

    链接伪类 a:link, a:visited, a:hover, a:active选定的连接

    结构伪类 E:last-child选择父元素的最后一个子元素

    　　　　 E:nth-child(n)选择父元素的第n个子元素，n从1开始

    　　　　 E:nth-last-child(n)选择父元素的倒数第n个子元素，n从1开始

    　　　　 E:first-of-type选择父元素同种标签的第一个子元素，n从1开始

     　　　　E:last-of-type选择父元素同种标签的最后一个子元素，n从1开始

    　　　　 E:nth-of-type(n)选择父元素同种标签的第n个子元素，n从1开始

     　　　　E:nth-last-of-type(n)选择父元素同种标签的倒数第n个子元素，n从1开始

    　　　　 E:only-child选择父元素下仅有的一个子元素

    　　　　 E:only-of-type选择父元素下的同种标签的唯一子元素

    　　　　 E:empty选择没有子元素的元素，空节点，不含文本

    　　　　 E:root选择根元素，HTML文档就是html

    注：n从0开始计算，可以使用表达式，如2n， 2n+1选择偶数和奇数元素，当然可以有even(偶数)和odd(奇数)

    -n+5这种方式表示前五个元素

    3. 显示模式

    3.1块级元素

    独占一行，可以设置宽高，默认宽度为父容器宽度，内部可以放块级元素及行内元素
    div、ol、ul、li、dl、dt、dd、p、h1-h6
    （P元素不能放块级元素div，文字类的标签也不能放块级元素，h1-h6，dt）

    3.2行内元素

    一行可放多个，直接设置高和宽无效，宽度是内容的宽度，行内元素只能放文字或其他行内元素

    a、b、i、span、strong、select、label、em、button、textarea
    (特殊的是a标签，可以放块级元素，但a不能再放a)

    3.3行内块元素

    可以一行放多个，可以设置宽高

    input、img、td

    3.4显示模式转换

     display:block   inline   inline-block

    行高

    单行文字垂直居中：line-height 设置为盒子高度

    4.背景

    背景图片在盒子的底部，尽量使用背景图片代替img，易于定位

    background-image: url(image/a.png); // 地址不需要引号

    background-position: x y;  // 可以用方位词 right / left、top  / bottom、center

    background-repeat: repeat  no-repeat  repeat-x  repeat-y;

    background-attachment: scroll  fixed;

    背景透明：background: rgba(r, g, b, a)

    5.CSS三大特性

    层叠性：后面的覆盖前面的样式，样式冲突就近原则

    继承性：font- text-  line- 开头及color可继承

    优先级：选择器相同执行层叠性，

    选择器不同按照权重：继承或* （0,0,0,0） <  标签选择器 （0,0,0,1）  <  类、伪类及属性选择器 （0,0,1,0） <  id选择器（0,1,0,0）< style="" 行内样式（1,0,0,0）  <  !important （∞） 

    (权重叠加但不进位)

    6.盒模型

    组成：margin、border、padding、content

    特殊情况-小技巧：盒子不设置宽度时（默认和父级元素一样宽），padding不会撑开盒子

    块级元素居中对齐：设置宽度，左右的margin设置为auto;

    清除元素的内外边距：*{margin:0; padding:0;}，行内元素尽量只设置左右内外边距；

    垂直外边距合并:
    两个垂直的盒子，上有margin-bottom, 下有margin-top,那么它们之间的margin不是两者相加，而是取最大的一个。
    所以尽量只给一个盒子设置margin
    margin塌陷:
    两个嵌套的盒子，如果父元素没有上内距(padding)及上边框,
    父元素的上外边距会与子元素的上外边距发生合并，结果为两者中最大值。
    解决办法：
    1.为父元素添加上边框或上内边距(padding)
    2.父元素设置overflow: hidden;
    3.浮动、绝对定位的盒子不会有塌陷

    7.浮动

    CSS提供了三种机制来排放盒子，标准流、浮动流和定位。

    7.1标准流

    块级元素独占一行，从上到下排列

    行内元素从左到右显示，碰到父元素边缘自动换行

    7.2浮动流

    为什么需要浮动？

    多个盒子水平排列(转为inline-block，盒子之间会有缝隙)

    盒子左右对齐；

    标准流不能解决的布局用浮动来完成网页布局。

    float: left  |  right;

    特点：1.元素浮动之后不占据原来的位置（脱标）,漂浮在普通流元素上面；
               2.浮动的盒子在一行显示，父级元素放不开时会换行；
               3.行内元素浮动之后转换为行内块元素,但是元素之间不会有缝隙。
     
    注意：浮动的元素会脱标，为减少对其他元素的影响需给浮动元素添加标准流的盒子。
    关于浮动对其他元素的影响可以看下面的示例。

     

     

     

    7.3 清除浮动

    父盒子不便设置高度时(子元素内容不确定)，子盒子浮动时不会撑开父盒子，如下图示container是父盒子：

     清除浮动就是为了解决父元素因子元素浮动而导致的高度为0的问题，清除浮动会自动检测子元素的高度，不会影响后面的标准流。

    清除浮动的方法

    1.额外标签法

    在最后一个浮动元素的后面添加空标签, 并设置样式{ clear: both; }；

    缺点：添加多余的标签，影响结构

     1 // style
 2 .clear {
 3       clear: both;
 4     }
 5 
 6 // 添加空标签
 7 
 8 <div class="container">
 9     <div class="top">top</div>
10     <div class="bottom">bottom</div>
11     <div class="clear"></div>
12   </div>
    View Code

    2.给父元素添加overflow：hidden;

    缺点：内容增多时不会自动换行，无法显示需要溢出的元素

    3.使用after伪元素

     先声明清除浮动的样式，css添加after伪元素，应用到要清除浮动的父元素上，是额外标签法的升级版。

     1 /* 声明清除浮动的样式， 给要清除浮动的元素添加class = clearfix*/
 2     .clearfix::after{
 3       content: "";
 4       display: block;
 5       height: 0;
 6       visibility: hidden;
 7       clear: both;
 8     }
 9     .clearfix{ /*兼容ie6、ie7*/
10       *zoom: 1;
11     }

    4.双伪元素法

     1 /* 双伪元素法, 给要清除浮动的元素添加class = clearfix*/
 2     .clearfix::before, .clearfix::after{
 3       content: "";
 4       display: table;
 5     }
 6     .clearfix::after{
 7       clear: both;
 8     }
 9     .clearfix{ /*兼容ie6、ie7*/
10       *zoom: 1;
11     }

    8.定位

    8.1 标准流或浮动流无法解决的效果，将盒子定在某个位置，能自由地漂浮在其他盒子上方。

    定位 = 定位模式 + 边偏移

    定位模式：static、relative、absolute、fixed

    relative：相对于自身原来标准流的位置再定位，定位后其原来位置仍被保留，不脱标；

    absolute：相对于有定位的父元素为基准进行定位，父级元素没有定位时以浏览器基准；

                      绝对定位的元素会脱标，不保留原来的位置；

                      通常不单独使用，子绝父相，父元素继续占有原来的位置，子元素可以在父元素中自由移动；

    fixed: 完全脱标，以浏览器的可视区域为基准，不随滚动条滚动

    边偏移：top、bottom、left、right 必须要和定位模式结合才能使用

     8.2 一张图说明浮动与定位的差异：

    橙色文字为注释内容。

     8.3 定位的盒子居中对齐

    (1) 先用定位偏移父元素一半，在用margin移动回来自身的width / height的一半，需要精确单位

    left: 50%; 

    margin-left: -width / 2;

    top: 50%;

    margin-top: -height / 2;

    (2) 使用transform变换自身宽度/高度的一半，可以使用%，不需要具体单位，推荐

    left: 50%;  /* 相对于父级元素的一半*/

    top: 50%;

    transfrom: translate( -50%, -50%);  /* 变换自身宽度的一半*/

     8.4 元素的堆叠顺序

    定位元素会堆叠，后来者居上

    定位元素才有 z-index，值越大越靠上

    8.5 改变元素的显示模式

    1.利用display

    2.浮动后变为inline-block

    3.定位后相当于inline-block

    9.技巧

    9.1 布局选择

    标准流解决行与行的布局；

    浮动解决一行多个排列；

    定位解决压盖与堆叠；

    尽量使用标准流，标准流解决不了的使用浮动，浮动解决不了的使用定位。

    9.2元素的显示与隐藏

    1.display

    隐藏：display: none;  隐藏起来，且不保留位置

    显示：display: block;  除转换为块级元素外，也有显示元素的意思

    2.visibility

    隐藏：visibility: hidden;  隐藏起来，且保留位置

    显示：visibility: visible; 显示元素

    3.overflow

    overflow: visible | hidden | scroll | auto;

    overflow: visible; 先是超出部分，不添加滚动条

    overflow: hidden; 超出盒子的部分隐藏

    内容超出时出现 ... 效果：

    white-space:nowrap;  //强制文本一行显示

    overflow:hidden;  //超出部分隐藏

    text-overflow:ellipsis;  //溢出时显示省略号

    9.3 文字和图片对齐问题：

    vertical-algin只针对行内元素和行内块元素起作用。默认情况下图片和文字的基线对齐：

    下图是vertical-align: bottom; 的效果

    下图是vertical-align: middle; 的效果

    9.4 CSS书写顺序：

    1.布局定位属性：display / position / folat / clear / visibility / overflow  (display应第一个写，关系到模式)

    2.自身属性：height / width / margin / padding / border / background

    3.文本属性：color / font / text-decoration / text-algin / vertical-align / white-space / break-word

    4.其他属性：content / cursor / border-radius / box-shadow / text-shadow ...

     9.4 负值之美

    1.定位+负值实现居中对齐

    2.margin-left: -1px; 避免一行多个盒子边框重复, (浮动的盒子会紧贴在一起)

    解决hover时突出显示边框的问题：

    (1) 添加position： relative；

    (2)或者把z-index提高；

    9.5 三角形之美

    边框模拟三角

    元素的高宽为0

    四条边都要设置边框，不需要的边框颜色设为transparent

    为了兼容性设置font-size: 0; line-height: 0;

    10. 各单位的使用和区别

    vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

    vh：视窗高度的百分比

    vw、vh 与 % 百分比的区别

    （1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。

    （2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
     
    em，rem，px

    px: 像素，相对长度单位。像素是相对于显示器分辨率而言。

    em: 相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。 

    em的特点:  em 的值并不是固定的。 

    在使用“em”作单位时，一定需要知道其父元素的设置，因为“em”就是一个相对值，而且是一个相对于父元素的值，其真正的计算公式是：

    1 ÷ 父元素的font-size × 需要转换的像素值 = em值

    rem: 与em区别在于使用rem为元素设定字体大小时，虽然仍是相对大小，但相对的只是HTML根元素。通过rem，既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 （css3新增，不支持ie6-8）
     

    11. 动画和变换及过渡

    https://www.cnblogs.com/jyughynj/p/12508592.html

    12. 布局

    常见布局的写法：
    一列居中
    两列：一列固定宽度，一列自适应
    三列布局：两侧固定，中间自适应(1.全部使用浮动，left左浮，right右浮，2.父盒子相对定位，左右绝对定位，设置left:0; right:0;,center设置两则margin; 3.使用flex)

    flex布局阮一峰老师总结的太好了，请参考以下：

     

    其他

    盒模型  box-sizing:content-box(外加模式)    box-sizing:border-box(内减模式)

    媒体查询   @media screen and (max- 1440px){}
     
  • 相关阅读:
    也谈谈关于WEB的感想
    spring boot，https，双向ssl认证
    Spring Cloud Gateway(二)
    Spring Cloud Gateway(一)
    .Net Web Service 自定义返回值命名
    随便记一下，C#并行环境操作Winform的代码段
    随便记一下，解决Windows Server 2012无法远程登录的方法
    记录C#控件DataGridView绑定BindingList无法排序问题（转）
    记录SQL Server 2019链接Oracle 11g R2的过程
    Json CPP 中文支持与入门示例
  • 原文地址：https://www.cnblogs.com/jyughynj/p/11227291.html
Copyright © 2020-2023  润新知