【CSS学习笔记】持续更新中~

CSS学习笔记

1. CSS简介

​ css(cascading style sheets)层叠样式表，用于装饰HTML骨架

1.1 CSS的注释

​ 注释HTML与CSS不同，HTML： ，CSS注释为：/* */

1.2 CSS的引入

1.2.1 引入的三种方式

​ CSS有三种引入方式：行内式、内嵌式与外联式。

• 行内式——直接在标签内通过设置属性style=" "进行样式设置

• 内嵌式——在HTML的title标签下写样式，通过< style> < /style>，值得注意的是，在HTML5之前，style标签内还有属性type=“text/css”，用于让浏览器识别出CSS内容；

• 外联式——同样地，在title标签下引入css样式表，使用link标签，属性使用rel(relationship)=“stylesheet” ，href为外联的CSS地址，即< link rel=“stylesheet” href=" ">

  • 为了减少后续的CSS属性设置冗余工作，可以将默认的一些样式表通过外联的方式引入到HTML中，例如可能需要设置如下样式：

    body,dl,dd,p,h1,h2,h3,h4,h5,h6 {margin: 0;}
    ol,ul { margin: 0;padding: 0;list-style: none;}
    img {border: none;}
    .beian {position: absolute;left: 50%;bottom: 0;width:300px;margin:0 auto; padding:0;}
    .beian a {display:inline-block;text-decoration:none;height:20px;line-height:20px;}
    .beian img {float: left;}
    .beian p {float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#f1efea;}
    

1.2.2 优先级

​ CSS的这三种引入方式的样式表存在一定的优先级问题，即行内式>内嵌式>外联式

2. 选择器

2.1 分类

• 标签选择器；例如：p { }
• id选择器；例如： #id { }
• 类选择器；例如：.class { }
• 通配符选择器；例如：* { }，常用作清除浏览器默认样式
• 后代选择器；例如：.box p { }，中间需要加空格，表示子代；后代选择器常用的格式：.class+空格+标签选择器/类选择器/ID选择器，一般不会用id选择器作为父元素
• 继承；虽然不算作选择器，但它不设置样式时，默认会继承父元素的样式属性

2.2 区分

• id选择器与类选择器的区别是类选择器类似于人名而id选择器类似于个人身份证，人名可以同名(可以共用一个样式)

2.3 优先级

• ！important > 行内式 > id > . class > 后代选择器 > 标签选择器 > * > 继承
• 不考虑使用规范，后代选择器可以比id选择器或者类选择器优先级要高，因为 .in < .out p，因为类+标签>类，涉及到权重计算，同样地 #in < #out p ，但考虑实际应用，咱们直接用 .in或者# in就可以了，不要多此一举！！！！！

<div class="out">
    <div class="in"></div>
</div>

• 注释：！important是放在样式表的属性后面的，直接空格+！+tab；

3. 盒子模型

3.1 简介

• 盒模型，由四部分组成：content内容、padding内边距、border边框、margin外边距。
• border边框有三个属性：
  1. border-width、border-style、bordre-color，其中边框风格可以设置：none无线、solid实线、dashed虚线、dotted点线、double双实线。复合属性：border：line-width || line-style || line-color；
  2. 可以将宽高设置为0，然后利用四个方位设置四种颜色来显示四个等腰直角三角形；另外，可以将颜色rgba(0,0,0,0)，也可以设置border-color:transparent;，即可设置为透明不可见，以达到单独设置三角形的效果。
• 盒子模型分为正常盒模型和怪异盒模型两类；

3.2 正常盒子的三个种类

• 另外，在正常默认盒子属性里设置宽高时，这里的宽高指的是content的宽高，而不是(content+padding+border)的宽高；
• 当padding和border值变大时，content的宽高(即正常盒子的宽高)不会发生变化，但是整体显示区域即F 12查看的区域宽高变大了，因为border和padding变大会撑大盒子(但不会压缩content)；

3.2.1 块级元素

• 块级元素(块盒子)可以设置宽高，默认的宽度时占满父元素的宽度，默认的高度由内容撑开；块级元素的宽高可以通过百分比%来设置，但特别的是设置百分比宽度时需要将html, body或者父级元素 {height:100%}；
• 但是，块级元素即使设置了宽度相对于下一个元素也是独占一行的存在；
• 块级元素具有padding和margin属性，但相对于行内元素则是四个方向都具备，因为行内元素的左右padding、margin才起效果，上下两个方向的属性是不起效果的。
• 常见的块级元素有：div、p、h、ol、ul、li、… (除了 span 、a、b、i、u、s、strong、em、ins、del(因为这些是行内元素) ，以及 img和input标签(因为也是行内元素但却拥有行内块元素的属性))。
• 块级元素对应于CSS属性值display : block ;

3.2.2 行内元素

• 行内元素不可以设置宽高(设置了也不起效果)，宽高只会由内容撑开；
• 行内元素不会独占一行，而是会和相邻的行内元素排列在同一行，直到一行排列不下就会换行；
• 行内元素的上下两个方位的margin没有效果，但是左右两个方位的margin不会有效果；
• 行内元素的CSS属性值为display : inline ;

3.2.3 行内块元素

• 行内块元素集成了行内元素与块级元素的特点；
• 行内元素设置为行内块后可以设置宽高，并且上下margin起作用；
• 块级元素设置为行内块后可以和后面的行内块或者行内元素在同一行排列；
• 需要注意的是，行内块元素和行内元素在同一行排列时会有空隙，是因为这两类元素前面的空格或者换行会被浏览器解析成一个1em大小的间隔，去除空格可以直接在父元素里设置字体大小font-size为0解决问题；也可以将标签连在一起不空格；
• 行内元素设置为行内块后同样也不支持auto自适应居中，但是上下的margin的设置是有效果的
• 设置为行内块的CSS属性值为display : inline-block ;
• 行内块元素的bug，就是和同级的行内块元素对齐在同一条基线上，解决方案是设置属性vertical-align:top;块级元素/行内块元素的垂直对齐方式vertical-align，垂直对齐方式的常见取值有baseline基线(default)、top、middle and bottom。

#在CSS中可以通过display属性转换元素类型

• display:none; /* 元素不显示 */
• display:block; /* 元素以块级形式展示 */
• display:inline; /* 元素以行内形式展示 */
• display:inline-block; /* 元素以行内形式排列，以块级形式展示 */

3.4 怪异盒模型

• 设置怪异盒模型时，box-sizing:border-box;
• 怪异盒模型的宽高指的是(content+padding+border)的和，当增加padding和border时，盒子宽高是不变的，即浏览器显示的盒子区域宽高不会变化，但是content会随着padding和margin值得变大而压缩；

3.5 margin塌陷问题

3.5.1 margin简介

margin为外边距，不计入盒子模型的宽高，设置左上的外边距会影响该盒子本身的位置，但右下的外边距不会影响该盒子本身而是其右下的其他盒子，和padding同样的可以设置一个值、两个值、三个值与四个值，不过它可以多一个属性值auto，例如：margin：auto ;（其实省略了0，即margin: 0 auto ;） 就代表该盒子在父盒子左右的中间，但由于CSS设计的问题，可以左右自适应达到左右居中对齐但不能做到上下居中对齐；

3.5.2 margin父子元素合并

父子外边距会存在合并问题，理由就是子盒子的上外边距没有找到支撑点(这里别扯为什么左外边距有支撑点，因为CSS就这样规定的)，所以才会去找父盒子的支撑点，如果一直没有找到就直到找到为止，这里需要提下支撑点是指盒子上边的内边距或边框设置了宽度，这样就有支撑点了；

3.5.3 margin兄弟元素合并

兄弟外边距存在合并现象，解决方案：给任意一个兄弟添加行内块属性(display:inline-block;)解决问题，可以实现正正相加、负负相加与负正相加

3.6 盒子隐藏内容-overflow

3.6.1 overflow:visible;

默认值，不需要要设置，表示内容大小超出盒子范围也会正常显示

3.6.2 overflow:hidden;

表示当内容大小超出盒子区域就会被隐藏，效果相当于被裁剪掉了溢出盒子的部分；

3.6.3 overflow:scroll;

• 表示当内容大小超出盒子区域时会出现滚动条，宽度超出盒子就有底部滚动条，高度超出盒子就有右侧边滚动条；
• 但值得注意的是，无论内容大小是否超出盒子区域都会出现滚动条，只是有能否滑动的差异，因而这样设置不太美观，因为存在盒子区域大于内容大小的情况

3.6.4 overflow:auto;

只有当内容大小超出盒子区域时才会出现滚动条；当不超出时则不会出现滚动条，很符合实际要求；

4. 文字样式

4.1 font-style

• 用来设置文字是否需要倾斜效果
• font-style : normal;默认值，表示不倾斜文字；类似的HTML的标签有：< i > 和 < em >
• font-style : italic;表示文字倾斜；
• font-style: oblique;因为有些文字可能没有斜体展示，因而可以设置改属性来强制倾斜该文字;

4.2 font-weight

• normal;默认属性值，是正常的文字大小
• bold;加粗文字；
• bolder;更粗的字体;
• lighter:细的字体;
• 也可以取值：100~900之间的所有整百数；

4.3 font-size

• 通过设置属性值来调整文字的大小
• 常见的单位有：px-像素大小、em-浏览器单位文字大小，chrome里1em=16px、rem-移动端单位；
• 当然也可以通过百分比来设置，根据的是当前默认的大小进行百分比调整；

4.4 font-family

宋体，楷体，黑体，微软雅黑、Consolas等等

4.5 color

• 用于设置字体的颜色，方式有以下四种：
  1. 直接写颜色英语，例如：red、Skyblue、pink、black、white、gold 和green;
  2. rgb，是三原色组成的，例如：rgb(0,0,0)表示黑色、rgb(255,255,255)，每一个原色取值范围(0~255);
  3. rgba，是三原色加不透明度组合而成的，即red+green+blue+alpha;例如：rgba(255,0,0,.5)，其中a(alpha)的取值范围(0~1)，0.5前面的0可以省略；1是完全不透明，0则是完全透明；
  4. 十六进制颜色法也可以添加不透明度，将(0_{255)转换为十六进制为(00}ff)，例如：#ff0000表示红色相当于#ff0000ff，为f00f；不透明度的(0_{1)的范围换为(00}ff)；

4.6 font-variant

• normal，默认值没有任何效果
• small-caps，可以将小写英文字母切换为大写字母，但是相比起大写字母会更小一点也就是说效果像小型大写字母；

4.7 line-height

• 可以在块级元素和行内元素中设置；
• 在很多行文字中起到美观作用；
• 也可以将行高设置元素的高度，这样就可以让文字垂直居中显示；

4.8 font复合属性

• font:font-style font-weight font-size/line-height font-family ;
• 例如：font：italic bold 1.3em/30px 楷体；

4.9 text-align

• left，默认，文本对齐方式为左对齐；
• right，文本对齐方式为右对齐；
• center，文本对齐方式为居中对齐；

4.10 text-indent

• 文本缩进，但只对块级元素和行内块元素起作用
• 并不是padding和margin的部分，而是内容的部分；

4.11 text-transform

• none，默认值，不作任何处理
• uppercase，字母全部转为大写；
• lowercase，字母全部转为小写；
• capitalize，每个单词的首字母全部转换为大写，但是单词中其余的大写字母则不变为小写仍然保持大写；

4.12 text-decoration

• none，默认值，文字将不会有任何文本线；
• underline，文本将具有下划线，类似于标签< u > < ins >
• line-through,文本将具有穿过文本的横线，类似于删除线，< s > < del >
• overline，文本将具有上划线

4.13 letter-spacing

• 用于设置字或字母之间的间距，不论是单词的单个字母还是汉字都会按照设置的间距隔开；
• 也就是说只要是连在一起的字母或者连在一起的汉字都会按照每个字母或者每个文字单独隔开；

4.14 word-spacing

用于设置句子与单词之间间隔，无论是单词还是一个汉语句子，都是一个整体，会被整体隔开；

4.15 word-break

• normal，默认值，使用浏览器默认的换行方式
• break-all，允许在单词内换行，不太符合实际需求；
• keep-all，只能在半角空格或连字符处换行，更加符合实际需求；

4.16 text-overflow

• clip，默认值，当超过文字显示区域时，多余的文字会有被裁剪删除掉的效果；
• ellipsis，与上面的不同，它不会出现被删除裁剪掉的效果，而是会用省略符号’…'来替换那种未被显示文字效果；
• 另外，想要出现省略效果，需要配合属性overflow:hidden;来使用，而且目前还只能做到一行最后末尾显示省略效果；
• 因而需要单行省略三件套：white-spacing:nowrop; overflow:hidden; text-overflow:ellipsis;

4.17 vertical-align

• 只对行内元素与行内块元素起效果；
• baseline，默认值，元素的基线与父元素的基线对齐；
• top，元素的顶端与一行中最高元素的顶边对齐；
• middle，元素的中垂点对父元素的中间对齐
• bottom，元素的低端与一行中最高元素的底边对齐；

4.18 white-space

• normal，默认值，正常进行换行；
• nowrap，文本将不会进行换行；一般配合宽度自定义设置使用；

5. 背景属性

• background属性用于设置盒子的背景颜色或者背景图片。
• background是一个复合属性。backgorund : color image repeat position/size attachment ;
• 背景与内容的层叠关系3D示意图

5.1 background-color

• 背景颜色值
• 背景色默认是会延伸到border下方的；例如设置点状线或者虚线都可以看出来；

5.2 background-image

• none，默认值，不插入背景图；
• url(‘路径’); 插入该路径的背景图；
• 同上，背景图片默认也是会延伸到border下方的。

5.3 background-repeat

背景图片平铺方式

/* case 1 : 背景图片平铺 默认*/
div{ background-repeat: repeat; }

/* case 2 : 背景图片不平铺 */
div{ background-repeat: no-repeat; }

/* case 3 : 背景图片水平平铺 */
div{ background-repeat: repeat-x; }

/* case 4 : 背景图片垂直平铺 */
div{ background-repeat: repeat-y; }

5.4 background-position

设置背景图片位置；

• background-position:X Y;
• X和Y默认是：0 0

X允许的取值方式	Y允许的取值方式
left左对齐 center水平居中 right右对齐	top顶部对齐 center垂直居中 bottom底部对齐
百分比	百分比
px	px

如果只给一个值，那么第二个值默认center（50%）;

X轴的值和Y轴的值如果给的是方位（单词）值，可以交换顺序。

5.5 background-size

• 设置背景图片的尺寸；（CSS3新增属性，需要浏览器的支持，这个网站可以查询兼容性：caniuse）

• 通常用于在不改变图片宽高比的情况下，铺满盒子。

• background-size:X Y; X和Y默认和原图 宽 高 对应，同时X Y可以是自己设定的百分比或像素

• background-size:cover; 等比例缩放直到铺满X轴和Y轴；

• background-size:contain; 等比例缩放直到铺满X或Y轴其中一个；

5.6 background-attachment

• background-attachment：scroll; 默认值，背景随滚动而滚动；
• background-attachment: fixed;背景不随滚动而滚动

5.7 background-clip

背景（颜色/图片）的显示是会延伸到border区域的，clip可以用于设置背景延伸到哪个位置，把不需要的部分剪裁掉。

background-clip: border-box; 默认值，延伸到border位置

background-clip: padding-box; 只延伸到padding位置，剪裁掉border部分的背景内容

background-clip: content-box; 只延伸到内容部分，剪裁掉padding和border部分的背景内容

5.8 background-origin

背景的起点位置默认是border的左顶点，origin可以设置背景的起始位置。这个属性通常用来控制背景图片的起始位置，因为背景颜色不管从哪里起始都是一个颜色看不出什么变化。

backgruond-origin: border-box; 默认值，以border左顶点作为背景起点

background-origin: padding-box; 以padding左顶点作为背景起点

background-origin: content-box; 以内容部分左顶点作为背景起点

5.9 img与bgi的区别

• 背景图片不占用content内容部分，而img标签会占用。

• 背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。

• 何时使用背景图片，何时使用img标签并没有一个确却的标准规定，可以根据实际情况做选择。

• 如果为了给盒子加底色为内容部分加背景，或者是加一些小图标项目符号等，则使用背景图片。

• 如果是确却的想表达一个图片信息，也希望搜索引擎能检索到对应的图片信息，则使用img标签。

5.10 多背景图的写法

background:
    url("1.jpg") no-repeat right bottom, 
    url("2.jpg") no-repeat right top;

CSS学习笔记下载链接