CSS初级

CSS是什么

1.css的作用
css是一门用来修饰HTML标签的语言
2.css的语法规则
-1.书写位置：
内部样式【写在style标签中，可以放在任意位置，但通常都写在head标签的最后】
行内样式【一般不用，直接写在标签里】
外部样式【写在css文件中，在HTML文件里用link标签引入】（好处：一个css文件可被多个HTML文件使用；一个HTML文件也可以使用多个css文件）
-2.语法规则：

  选择器 {
 css样式代码
 }

3.css基础选择器
-1.标签选择器：直接使用标签名选择、权重{0，0，0，1}
-2.类名选择器：给标签写入class类名、选择器写法 .类名 、权重{0，0，1，0}
-3.id选择器：给标签写入id名称、选择器写法 #id名 、权重{0，1，0，0}
-4.通配符选择器：写法 星号* 、权重{0，0，0，0}

css样式

1.css样式-字体样式
-1.字体系列：font-family（注意：字体名称中有汉字、多个单词需要加引号）
-2.字体大小：font-size（浏览器默认大小16px、默认最小字体12px）
-3.字体粗细（粗细）：font-weight（单词值或者数字值-100~900）
-4.字体风格（斜体）：font-style 单词值、normal正常；italic斜体

2.css样式-文本样式
-1.文本颜色：color
-2.文本对齐：text-align（left、center、right）
-3.文本修饰：text-decoration（underline下划线、none取消修饰、line-through删除线、overline上划线）
-4.文本首行缩进：text-indent
-5.行高：line-height（设置行高等于高度，单行文本居中）

3.emmet语法（了解）


4.复合选择器
-1.后代选择器：符号 空格（可以选择所有的后代元素）
-2.子代选择器：符号 > （只能选择直接子代的元素）
-3.并集选择器：符号 ， （可以选择多个元素，用逗号隔开）
-4.交集选择器：写法 选择器1选择器2 （选择器连着写、中间不需要加符号、选择具有所有选择器的元素、如果有标签选择器，需要把标签选择器写在最前面）
-5.伪类选择器：
:hover 选择条件 鼠标经过、所有标签均可使用（:link未访问的链接、:visited已访问的链接、:active已选中的链接）
:foucs 选择条件 获取焦点、只有能获取焦点的元素可以使用、例如input

5.显示模式
-1.块级标签：
特点：一行显示一个、可以设置宽高、默认宽度为父元素的100%、里面可以嵌套所有标签
注意：文本类块级标签不能嵌套其他的块级标签
-2.行内标签：
特点：一行显示多个、不能设置宽高、默认宽度为内容宽度、里面智能嵌套行级元素和文本
注意：a链接里面不能嵌套a链接、a链接可以嵌套块级标签
-3.行内块：
特点：一行显示多个、可以设置宽高、默认宽度时内容宽度（表单标签有浏览器设置的默认宽度）、行内块可以嵌套行内标签和文本
注意：单标签不能包含其他标签和文字、textarea智能包含文字、select标签只能包含option、option中智能放文本、td中可以嵌套任何标签
-4.显示模式的转换-display
块元素-display：block；
行元素-display：inline；
行级块-display：inline-block；

6.背景样式
-1.背景颜色：background-color
-2.背景图片：background-image、url(图片路径)
-3.背景平铺：background-repeat
no-repeat不平铺、repeat-x水平平铺、repeat-y垂直平铺
-4.背景定位：background-position（可以使用方位名词、数值、或混合使用；只使用方位名词时可以不在意顺序）

CSS三大特性

1.层叠性： 同名的样式被设置多次只会有一个起作用、其他的会被覆盖
2.继承性： 上级标签设置的文本样式会被后代标签继承
3.优先级：
权重：
继承、通配符选择器{0，0，0，0}
标签选择器{0，0，0，1}
类选择器{0，0，1，0}
id选择器{0，1，0，0}
行内样式{1，0，0，0}
!important{无穷大}
注意点：
优先级可叠加、权重高的起作用
优先级相同时，写在后面的起作用
通配符的优先级比继承的高
权重的叠加不能进位

盒子模型

1.盒子模型是什么？
在网页中，所有标签的表现形式都是一个长方形，将其称之为盒子模型
2.盒子的组成
当指定一个宽高时、指定的只是内容区域的宽高
-1.内容
-2.边框-border

 border：border-width border-style border-color；
 /没有顺序、可以分开写/

边框合并：border-collapse：collapse；（只有表格可以使用）
-3.内边距：padding（设置盒子内容和边框的距离）

  padding：10px 10px 10px 10px；
  /可以不写四个值，取值按上右下左的顺序、如果有缺少的取值按对边来、只写一个则四边相同/

-4.外边距：margin（设置盒子之间的距离）

3.水平居中
块元素：给自己设置margin：0 auto；
行元素或行级块：给父元素设置text-align：center；

4.外边距的合并塌陷
-1.外边距合并：兄弟标签的上下外边距会合并、取最大值
-2.外边距塌陷：父子关系的标签，子标签的上外边距会把父标签拉下来（塌陷）
解决方法
给父元素设置边框或者内边距（只设上边就可以解决）
给父元素设置overflow：hidden;

特殊样式

1.圆角边框

border-radius：30px；
/可以给多个值，顺序为从左上角开始顺时针排列、缺少的取对角值/

2.盒子阴影

box-shadow:阴影的水平位移 阴影的垂直位移 阴影模糊距离 阴影延展距离 阴影颜色

3.文本阴影
text-shadow与盒子阴影取值方法相同

浮动

布局的三种方式-标准流、浮动、定位
1.设置浮动-float：（left、right、none）
2.浮动的好处-修改标签的对齐方式（靠左或靠右）、设置的一行显示的标签之间没有空隙、元素浮动后可以设置宽高
3.浮动的特性
-1.脱标-浮动的元素相当于原地浮起来，不占位置，后面的标准流元素会占据其之前的位置、浮动元素不会影响前面的元素
-2.一行显示多个、且中间没有空隙
-3.类似行内块：可以设置宽高、如不设宽度则默认宽度为内容宽度
4.浮动的注意点
-1.要把浮动元素嵌套在标准流元素里（浮动元素不占位置，会影响后面元素的布局）
-2.一个元素浮动则他的兄弟元素都设置浮动、不然会影响布局
-3.浮动元素不会压在行内块、行元素、文本上
5.清除浮动
-1.浮动的弊端：浮动的元素不能撑开父元素的高度，而我们布局有时需要让父元素的高度被浮动元素撑开
-2.什么是清除浮动：清除浮动就是解决浮动元素撑不开父元素高度的问题
-3.清除浮动的方法
隔墙法-在浮动元素后加一个空的块标签并给其设置clear：both；（不建议使用）
给父元素设置overflow：hidden；（不建议使用，会让超出父元素的内容隐藏）
after伪元素清除浮动

  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;
}

双伪元素清除浮动

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

布局方式

1.版心盒子：有固定宽度、水平居中
2.通栏盒子：和浏览器宽度一样（不设宽度）
3.布局顺序（建议）：从外向里、从上到下、从左到右、先写大小、再写位置、最后修饰
4.标签选择：尽量不使用行内块

定位（position）

1.为什么要使用定位？
定位可以让元素自由地移动，并且压住其他盒子
2.定位的组成
定位模式+边偏移
边偏移：定位的盒子移动的距离、有top、left、right、bottom四个值
3.定位模式
-1.static 静态定位（就是没有定位）
-2.relative 相对定位（相对自身位置移动、不脱标、占有未移动之前的位置）
-3.absolute 绝对定位（相对最近的有定位的上级元素移动、脱标、若所有的父元素皆无定位则相对于文档流定位-一般使用绝对定位都会-子绝父相）
-4.fixed 固定定位（相对浏览器的可视区域移动、脱标）
-5.sticky 粘性定位（以浏览器可视窗口为参照移动、不脱标、仍占有未移动时的位置、必须添加top、left、right、bottom之中的一个属性才能有效、跟页面滚动搭配使用）
4.z-index堆叠顺序（层级）——只有定位的元素可以使用
-1.属性值：正整数、负整数、0；数值越大越靠上
-2.如果数值相同、则按书写顺序、后来居上
-3.数字后面不要加单位

元素的显示隐藏

1.display显示
display：none；隐藏、display：block；显示
display隐藏元素后元素不再占有位置
2.visibility可见性
visibility：visible；可见、visibility：hidden；隐藏
visibility隐藏元素后仍占有原来的位置

overflow溢出隐藏

overflow指定了如果内容溢出一个元素的框（自身指定高度）时会发生什么
visible不剪切内容也不添加滚动条
hidden不显示超出部分的内容、超出隐藏
scroll不管内容是否超出，总是显示滚动条
auto如果内容超出则显示滚动条，不超出则不显示

如果有定位的盒子、慎用overflow：hidden；因为会让超出的部分隐藏掉

实际开发使用：1.清除浮动（不推荐、最好用伪元素）2.隐藏超出内容

CSS三角

宽高要设为零

div {
 	width: 0; 
    height: 0;
    border: 50px solid transparent;
	border-color: red green blue black;
	line-height:0;
    font-size: 0;
 }

京东三角

div{
        width: 0;
        height: 0;
        border-width: 100px 50px 0 0;
        border-style: solid;
        border-color: transparent burlywood transparent transparent;
    }

用户界面样式

1.鼠标样式
cursor
值
default-默认样式
pointer-小手
move-移动
text-文本
not-allowed禁止
2.轮廓线
给表单添加outline：0； or outline：none；
3.防止文本域拖拽
textarea属性-resize:none;

vertical-align属性应用

1.图片、表单和文字对齐

图片、表单都属于行内块元素、默认与文字基线对齐
vertical-align：baseline默认元素放置在父元素基线上、top顶端与行中最高元素的顶端对齐、bottom顶端与行中最低元素的顶端对齐、middle把此元素放置在父元素的中部
2.解决图片底部默认的空白缝隙问题
-1.给图片设置vertical-align：top | middle | bottom等（提倡使用）
-2.把图片转为块元素

溢出文字的省略号显示

1.单行文本溢出省略号

white-space：nowrap；/让文本一行显示、不折行/
overflow：hidden；/溢出隐藏/
text-overflow：ellipsis；/溢出部分用省略号代替/

2.多行文本溢出省略号

overflow: hidden; / 超出的部分隐藏 /
text-overflow: ellipsis; / 文字用省略号替代超出的部分/
display: -webkit-box; /弹性伸缩盒子模型显示 /
-webkit-line-clamp: n; / 限制在一个块元素显示的文本的行数 /
-webkit-box-orient: vertical;  /设置或检索伸缩盒对象的子元素的排列方式 /