CSS-详细笔记

CSS Cascading Style Sheets层叠样式表，用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页个元素进行格式化及个性设置。CSS能够对网页中元素位置的排版进行像素级精准控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS语法是 选择器{声明}，声明样式是 属性:"属性值"; 属性之间以空格隔开，书写过程中，空格、换行等操作不影响属性显示。

样式的建立：内联样式style、内部样式style、外部样式link

内联样式 <标签 style="属性1: 属性值1; 属性2: 属性值2;"></标签>

外部样式 link rel=关联样式 type=定义文档类型 结构和样式同时加载速度快；@impor url('路径')是老版本css遗留下来的引用方式，先加载结构再加载样式速度慢已被放弃，工作中最常用link方式

内部样式 选择器{声明}        内联样式权重最高，内外部样式权重相等，根据加载先后，显示后者

标签选择器 ID选择器 Class选择器 群组选择器 包含选择器 通配符

伪类选择器a:link  a:visited  a:hover  a:active  div:hover p

权重：（!important无敌 属性后添加，一般不用） 行内样式1 0 0 0  ID选择器0 1 0 0  Class选择器0 0 1 0  伪类选择器0 0 1 0  标签选择器0 0 0 1  群组选择器 分开后各自计算  包含选择器 进行相加  通配符0 0 0 0

---------------------------------------------------------------------------------------------------------------------------------

CSS浮动属性  float left right none

标准文档流、浮动流、定位流，此处写浮动流

块、行内、行内块元素添加浮动属性后会脱离文档流且变成行内块属性，浮动流只能控制该模块在父级边框内水平方向移动，可设置宽高，多个模块浮动后会在一行内逐个显示，若位置不足后边的浮动模块会向下移动直到找到合适位置，且可能会破坏初始的布局方式  浮动的特殊情况案例，图片浮动后，文本的环绕效果

浮动常用来设置div板块左右移动及nav导航并排左右排列，news新闻列表通常是上下排列不浮动

清除浮动  在父级添加overflow:hidden  在结束标签前添加div class=clear， .clear{clear:both;}清除最建议的一种方式是在引入固定清除法，在css初始化文件中建立.clear-fix备用：

.clear-fix::after{

    content: '';

    display: block;

    width: 100%;

    height: 0;

    clear: both;

    overflow: hidden;

    visibility: hidden;

}

遇到子元素脱离文档流引起的父元素高度坍塌或者是margin重叠等问题时，给父级添加名为clear-fix的classs属性值，行之有效，关于为什么不给父元素直接加宽高，是因为例如在菜单新闻列表页面，需要宽或高做到自适应，这时由于子元素脱离文档流，父元素无内容支撑，高度会坍塌时，这时需要在父级的css属性内添加overflow: hidden; 来触发这个板块的BDF属性，强制使浮动后的子元素高度计算在父级内，让父级重新获得支撑高度，且还是自适应类型的高度。

标准盒子模型

盒子实际占用的位置：x轴和Y轴的 content+padding+border+margin，增加padding值会增加内容的量，起到增加内边距的作用，像是给content增加宽高属性，增加和子级的距离，常用在导航li标签内的a标签两边增加padding值可以等距离增加a的两边宽度，border添加width/style/color属性改变边框样式，增加margin会增加盒子之间的间隔距离，通常用来设置父级盒子内，子级盒子的x/y轴位置，常见BUG有margin-top和margin-bottom接触浏览器可能只会解析最大值，此时应把两个值加到一个上、当父级里只有一个子级时，给子级设margin-top，会错误解析到父级上，此时可用padding调试。     padding只能为正值且通常用在父级上   margin的值为正、负值均可且通常用在同级上    常用margin: 0 auto;给div左右居中，属性值为顺时针 上 右 下 左

盒模型通常用来给页面板块色块布局，更多的运用div+css，同时ccs3中增加了移动端的弹性盒子模型往后再写

拓展：marquee标签 内容滚动标签

今天暂时写这么多，找时间继续补充内容

---------------------------------------------------------------------------------------------------------------------------------

大纲：字体文本属性：font text line  列表属性list-style  边框属性border  背景属性background

 字体文本属性

font-size 字体大小，标准文本字体大小在浏览器中默认为16px，默认最小字体可设置为12px，字体大小建议设置为偶数

font-family 表示用哪款字体，字体可以是中文例如'宋体'也可以Arial，中文可以加引号，单双号皆可，也可以不加，英文时单个单词可以不加引号，但如果时多个单词组合（名字里有空格的）需要加上引号，单双号皆可，Chrome浏览器默认字体是微软雅黑，字体属性可用多个，即主字体加备用字体，或者说加多个字体是为了方便不同的电脑加载更合适的字体：system-ui,-apple-system, BlinkMacsSystemFont,"segoe ui",Roboto,Helvetica,Arial,sans-serif 

font-weight 字体粗细  100~900、bold偏粗  bolder加粗  normal不加粗

font-style 字体倾斜  italic偏斜  oblique倾斜  normal不倾斜

拓展：weight和style属性的偏粗、加粗或偏斜、倾斜属性浏览器中肉眼看区别不明显，后面的normal属性是配合<b><strong>或<i><em>属性使用，例如超链接，前有图片后有文本，此时a里边可以用<i>标签包裹img，再用<em>包裹文字，然后css样式里设置font-style: normal；去除斜体效果，配合vertical-align: middle;可以起到图片字体引入且基线对齐的效果

color 字体颜色，颜色值可使用十六进制、rgb、rgba、英文单词，不建议用英文单词，不同的浏览器屏幕所认为的颜色存在偏差，十六进制以#开头，后面接六位1~9数字和A~F字母混搭，不区分大小写，rgb和rgba中的a代表可给字体设置透明度，十六进制、rgb、rgba取色范围是有相同之处的

line-height 文本行高，基于基线对齐，设置行高等于容器高度，可是里面的内容变成一行，内容在本行内会基于基线上下居中，当行高大于父级高度，字体下移，同时子级会超出父级而影响布局，不建议行高大于容器高度，若要字体下移可使用盒模型调试，常用 line-height和height的值相同

text-align 文本水平摆放方式  left  center right  justify两端对齐，常用水平居中 text-align: center;

复合写法：font: weight style size/line-height family; 其中weight、style可调换位置也可以不写，但是family一定要带上，因此复合写法使用较少，和color、text-align一样分开写更加灵活多变

font-variant: small-caps 英文文本设置成小号的大写字母，用在宣传海报或者logo区域

text-transform: capitalize 英文文本每个字母的首字母设置大写，用在宣传海报或foooter底部区域

text-decoration  文本修饰  underline下划线  overline上划线  line-through删除线  none清除样式 css初始化文件常用 text-decoration: none; 而在a:hover、a:active中常用text-decoration: underline

text-indent  首行缩进，针对第一行文本，正、负值都可以，常用属性text-indent: 2em;

letter-spacing  字间距，常用在中文汉字、超链接中

word-spacing  词间距，用在英文文本中 

列表属性

list-style-type  定义列表符号样式 disc默认实心圆  circle空心圆  square实心方块  none去掉符号

list-style-image  设置图片作为列表符号样式  url( ) 不常用，使用background-image代替更方便

list-style-position 定义列表符号的位置  outside默认列表外  insede列表里，外边会被margin:0隐藏

简写：list-style: none; 清除列表默认样式，常用在css初始化文件中，给导航、新闻列表清除样式

边框属性

border-color 边框的颜色

border-style 边框的样式  solid实线  dashed虚线  dotted点线  double双实线

border-width 边框的宽度 

常用简写：border: 1px solid #000;

拓展：

1.border-direction方向-width/style/color: 相应属性值；能改变单个方向的样式

2.简写显示下边框为1px灰色虚线，border-bottom: 1px dashed #ccc;

3.清除img、input、textarea(表单文本编辑框)、select(表单下拉菜单)常用 border: none或0;

4.做一个三角形，设一个div，宽高为0，border-width边框的宽度加大，并用border-color: transparent; 隐藏边框，边框的样式默认是solid实线，此时用border-top-color: #FF0000;可以得到一个三角形

背景属性

background-color / background  背景颜色

background-image  url( )  背景图片  当容器大于图片高度时，图片会进行平铺，当容器小于图片时，图片只会显示一部分，当图片等于容器大小时，刚好沾满位置显示完全

拓展：使用img导入图片时，图片有自身大小，强制占用本身大小的位置，显示一张图片，不平铺

background-repeat  背景平铺  repeat默认上下平铺  no-repeat不平铺  repeat-x横轴平铺  repeat-y纵轴平铺   常用  no-repeat  不平铺属性

background-position  背景定位  x轴 left  center  right  y轴 top  center  bottom   写属性值时，x轴和y轴要一起写上，如果只写其中一个，如right，另一个轴会自动设为center，全居中时写一个center

background-attachment  背景固定  scroll默认不固定  fixed固定，固定在屏幕显示区，下拉页面依然会在固定的屏幕区显示

复合写法：background: color url( ) no-repeat center；除了固定属性，其它属性使用频率非常高

---------------------------------------------------------------------------------------------------------------------------------文本溢出属性

overflow  visible默认显示  hidden溢出强制隐藏  scroll添加固定滚动条  auto溢出自动出现滚动条    溢出隐藏属性是在父级添加，原理是overflow可以触发父级盒子区域形成独立的BFC区域(块级格式化上下文：简说父级盒子内的块级元素上下排列，无论是否脱离文档流，宽度、高度依然计算给父级盒子)如果中间有文本溢出，可设置不同的属性值添加样式，常用的有 hidden 和 auto 

拓展：overflow-x  和  overflow-y                                                                                                            横向滚动导航栏：设好父级div宽高，里面设子级导航栏subdiv>ul>li浮动，例如：父级div宽200px小于子级div的宽度500px，此时父级添加overflow-x: auto;会出现滚动条，实现导航滚动效果

拓展2：white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis;    pre-wrap   <pre>              文本超出后自动用...隐藏，但鼠标移上去会显示全部内容：1.设好父级盒子宽高，里面设子级文本一段超出换行，在子级使用white-space: nowrap；使文本不换行，强制在一行会溢出，然后用overflow: hidden; 隐藏溢出文本，再用text-overflow: ellipsis; 使溢出部分变成...，常用商品介绍上

元素类型的分类

块级元素：可设置宽高大小，独占一行，上下排列，作用：块元素设宽高可镶嵌其它元素进行布局常见：div  ul  ol  li  h  p...

行内元素：宽高由自身内容决定不可设置，默认在一行内逐个显示                                                常见：a i em b strong...  BUG：margin-top/bottom没有效果，总容量依然遵循盒模型的计算方式

行内块元素：可以设置宽高大小，默认在一行内组个显示                                                                常见：img input 所有行内块元素都市以基线对齐的，解决基线对齐的方式vertical-align: middle等

元素类型的转换

如果给元素设置了浮动，含有浮动属性，表示当前元素同时转换成了行内块元素属性

display  显示方式  block转为块级属性  inline转为行内属性(不常用)  inline-block转为行内块属性      list-item转为列表属性(块级，不常用)    none显示为无(隐藏且不占位置)

display: block/none; 一对应用，显示和隐藏，常用在点击时中英文切换、二维码隐藏显示等效果 none的其它应用效果有：list-style: none;清除列表默认样式、text-decoration: none;清除a标签默认下划线样式、background/border: none; 属性初始化   outline: none;清除input等轮廓显示 

input  hr  textarea select  自带边框   img  input textarea select  行内块元素，可设置宽高改变样式  拓展：同一盒子内插入图片和span标签，设置span标签为display: inline-block; 高度100%，宽度0，行内块元素之间都是以基线对齐的，元素高度不一致时会出现垂直不对齐的现象，选择群组选择器给img和span标签使用vertical-align: middle;是一个使图片上下居中的方式之一