css 基础总结

###块元素和行内元素

1. 行内元素

   a button span lable input select option sub sup textarea big u strong

• 内联元素 自带属性 dispay: inline,
• 不独占一行,从左至右排布
• 设置宽高不起作用, 需要转换为块 display:block/ display:inline, 但是外边距可以直接控制.
• 内联元素的宽高是由本身内容大小决定的
• 内联元素只能容纳文本或者其他内联元素(不可嵌套块级元素)

2. 块元素

   div p table h1-h6 hr ol ul li dl dt dd form menu

   • 独占一行 本身自带 display:block 进行框架搭建…
   • 排列方式从上到下
   • 可以直接控制宽高以及盒子模型的css属性
   • 不设置宽度的情况下,块级元素的宽度是它父级元素的宽度 高度时内容本身的高度
   • 可以嵌套行内元素
   • ul/ol 下面只能是li , dl 下面只能是dt dd ,p 不能包含其他块级元素.

遵循标签语义化

有利于seo 优化(logo 采用 h1 提高权重)

样式丢失 的时候, 还可以比较好的呈现结构.
利于团队开发和维护

怎样做呢?
* 尽量减少使用无意义标签 减少嵌套 例如 span div
* 尽量不使用标签本身的css, eg: b ,font,s
* 需要强调的部分,使用strong,em ,尽量使用css

css引入方式

• 行内式 style=’’
• 内嵌式 (嵌入式) 在head 里面style 加样式
• 外链式 <link
• 导入式 通过 @import ‘url’ 引入独立的css文件

外链式 和导入式的区别 (面试)

* link 是html 标签, import 完全是css 提供的方式它要写在css 或者style 里面.
* 加载顺序区别:  页面被加载的时候 link 会同时被加载, import 则是需要页面全部下载完成再去加载. 
* 当使用dom 改变css 的时候,只能使用link ,import 是不能被控制的.
* 一般采用外链式

css 选择器

* 基本选择器
	1),标签选择器  权重为1
	2),类选择器 权重为10
	3),id选择器  权重为100 
	4),通配符选择器 *来选择全部, 权重=1,可能被覆盖.

    * {
	    margin:0;
	    padding:0; // 去掉浏览器自带的间距
    	}

	class 对应小黑点, id 对应# 

* 并集选择器
	用逗号隔开
	div,p,h1{}

* 交集选择器
	class='name1  name2'
	p.name1{}
	p#name2

* 后代选择器
	用空格隔开
	层级嵌套最好不要超过3个以上,只需要保留一些关键节点.

* 子代选择器
	符号 > 比如 h1 > strong 。 只作用于儿子这一代。

* 兄弟和相邻兄弟选择器
	
	h1+p{};相邻兄弟 ,	h1~p{};所有兄弟 
	加号前面的选择器只是用来作为查找兄弟的参照标签. 它并不会出现样式的影响.

* 属性选择器
	属性: 分为天生自带的和我们自定义的标签属性.
	  <style style="text/css">
		[zf] {
		background: red;
		}
		[type ='password']{
		background-color:red}
	</style>
	<div zf="zhu">009090</div>

* 伪类选择器	
	a:link

* 伪元素选择器
p:first-line{} // 第一行文字内容
:first-letter{} 第一个字
:before{  // 在元素之前添加内容
	content:'';
	}
:after{  //在元素之后添加内容
	content:'';
	}

伪元素天生自带content:''  不可省略,

只要遇见伪元素 before,after 就要添加content.

css3 新增的伪类选择器

:not 排除
li:not(last-child){
	border-right:0;
}
:last-child  最后一个子元素
li:nth-child(odd){ // 奇数行 或者2n+1
}

li:nth-child(even){ // 偶数行 或者2n
}

:nth-last-child 倒数第几个元素

利用li 打造竖分隔线
li:after{
display:inline-block;
content:'';
width:2px;
height:20px;
margin: 0 10px;
background-color:black;
vertical-align:bottom; // 基线对齐
}

权重

权重大小:!important > id > class > 标签 > *

权重相等, 进行就近原则,(不想就近 就使用 !important 权重是1000)

可继承和不可继承的样式属性

可继承: 字体样式 文字系列样式(text-align, line-height)

不可继承: 盒子模型,背景类,浮动,定位类

盒子模型

盒子模型之宽度和高度:

1. px 像素 写死
2. % 百分比 动态计算单位 自适应 响应式

padding 顺时针排列 上 右 下 左

border使用技巧: 利用边框做小三角/ 箭头

原理:
正方形任意相邻两边,然后旋转一定的角度,可得任意方向的箭头. deg 角度单位, rotate 旋转角度.

小三角的大小 由正方形的宽高来控制.

eg:

.arrow {
        width: 20px;
        height: 20px;
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        /*background: pink;*/
        transform: rotate(45deg);
        margin-top: 50px;
        margin-left: 50px;
    }

border使用技巧: 三角形

原理:
利用border的3个属性:border-width/border-style/border-color去实现, 宽度和高度要为0 ,实现一个由小三角组成的正方形. 其余方向都设为透明颜色即可:
eg:

	.triangle{
        width:0;
        height: 0;
        border-width: 100px;
        border-style: solid;
        border-color: transparent transparent transparent seagreen;
    }

margin 垂直外边距的重叠问题

(双margin重叠问题)
上面盒子有下边距,下面的盒子有上边距, 重叠时取大值.

盒子margin 兼容问题

问题:margin-top 传递问题

大盒子嵌套小盒子,小盒子加margin-top,会传递到大盒子上, 大盒子整体上移.

解决兼容问题:
1. overflow:hidden 解决margin-top的传递问题(此处不是移除隐藏),父元素添加 overflow,子元素添加margin
2. padding-top:1px; padding会影响实际的高度,需要在高度head基础上减掉padding-top的值
3. border-top:1px

盒子模型的宽高计算

元素的实际大小只受padding和border的影响和margin 没有任何关系.

实际宽度 = width + padding-left/padding-right+border-left/border-right
实际高度= height + padding-top/padding-bottom+border-top/border-bottom

切记 没有border的时候.

背景相关

####背景颜色:
background-color ,background(简写)都可以实现.

• text-align:center 文本的对齐方式.居中
• margin: 0 auto 控制块级元素居中,
• height, line-height 一致文字内容垂直居中.
• line-height 控制行间距, 每行文字的间距

####背景图片
background-image: url("");
background: url("");
重复: 默认是 background-repeat: repeat;

background: url("") repeat-x;

####背景图片定位
background-position: 50% 50%; // x轴越大 越往右

####背景关联
background-attachment 设置背景图片释放固定或者随着页面的其余部分滚动.

background-attachment: scroll; // 默认
fix: 背景图片固定
inherit: 从父元素继承

####背景尺寸

background-size: auto; // 图片本身的尺寸
:cover 覆盖 背景图片会等比例拉伸 到完全覆盖盒子大小, 等比例缩放展示到宽高区域

:content; 背景图片会等比例拉伸,

####背景剪裁
background-clip: border-box; 边框线之外开始裁减(不包括边框)
:content-box; 内容区域之外开始裁减
padding-box; 内边距区域之外开始裁减

##雪碧图
雪碧图技巧:
坐标主要是负值,
background-position;

##overflow:hidden的多种作用

1. overflow 溢出隐藏
2. 清浮动
3. 解决margin-top 的传递问题.

多个元素一行显示多种方法(面试)

1. 利用浮动,float:left/right,但是需要清除浮动.
2. display:inline-block; 父元素加font-size:0px;子元素分别加font-size;(会有兼容性问题)
3. display:line;把元素转换成行内元素,但是设置宽高属性不起作用.

单行/ 多行文本出现省略号

单行出现省略号:(4个条件,缺一不可)

width:200px;
overflow: hidden; // 溢出隐藏
white-space: nowrap; // 强制文字不换行
text-overflow: ellipsis; // 文字隐藏方式,省略号方式隐藏

多行出现省略号: (主要用于移动端手机界面)

display: -webkit-box;// 弹性盒子模型
-webkit-box-orient: vertical; // 垂直排列
-webkit-line-clamp:2; // 文字行数
overflow: hidden; // 溢出隐藏

浮动的特点

1. 元素在一行显示
2. 父元素浮动 子元素并不会继承父元素的浮动,如果需要子元素也在一行显示需要子元素也添加浮动.
3. 元素都是float:left; 左浮动 元素排列从左至右
   元素都是float:right; 右浮动 元素排列从右至左
4. 浮动元素会脱离文档流, 导致下面的没有浮动元素识别不了它的高度和位置,会往上跑,占领浮动元素的位置.

文档流和脱离文档流

文档流: 指的事元素的排列方式

正常的文档流: 从左至右 从上到下

面试题: 行内元素和块元素的特点,请举例说明:
*

脱离文档流: 相当于平行漂浮在文档流之上.(正常的排列方式被打破)

脱离文档流的影响:
1. float.
2. 定位

浮动产生的影响(副作用)

1. 父元素设置背景颜色属性不起作用.
2. 父元素设置边框border/ padding 没有被撑开,不起作用

如何解决浮动的影响?

1. 手动设置高度 (父元素本身) 不推荐
2. overflow:hidden /auto 清除浮动
3. clearfix 伪元素清除浮动(before ,after)

利用伪元素:after清除浮动必备的条件,缺一不可

1. 块级元素

2. clear:both

3. content:’’ ;

   xx:after{
   displock:block;
   clear:both;
   content:’’
   }

overflow:hidden和visibility:hidden 有什么区别

让元素消失方法

1. 透明度 opacity:0; //取值[0-1]
2. display:none
3. width:0px; / height:0; 和 overflow: hidden;
4. line-height:0,和 overflow: hidden;(没有设置高度的情况下)
5. visibility: hidden;
6. margin或者padding 足够大.
7. transform

##定位

###相对定位 63
position: relative;

1. 不会脱离文档流 占位 所有后面的元素不会往前跑.
2. 通过z-index 提高自己的层级, 越大 越往上.
3. 参照物: 自己本身

###绝对定位
position: absolute;

1. 脱离文档流

###固定定位
position: fixed; 固定到头部的导航.
特点:

1. 会脱离文档流
2. 可以设置上下左右四个方向,
   同时设置top和bottom 只有top 起作用
   同时设置left和right 只有left 起作用
3. 参照物: 整个浏览器窗口
4. 通过z-index 提高自己的层级, 越大 越往上.

###定位元素差异

position: relative;
position: absolute;
position: fixed;

相同点;

1.  可以设置上下左右四个方向,
	同时设置top和bottom 只有top 起作用
	同时设置left和right 只有left 起作用
2. 通过z-index 提高自己的层级, 越大 越往上.

不同点:

1. 是个脱离文档流

    绝对定位: 是
    相对定位: 否
    固定定位: 是
   

2. 参照物

   绝对定位: (一定要给直接父元素加相对参照物position: relative;)
   相对定位: 它自己本身
   固定定位: 整个浏览器
   

z-index 必须和定位元素(绝对,相对,固定)一起使用才有效果.

z-index 属性的特点

1. 修改定位元素的层级关系
2. 没有单位,支持负数

https://www.html.cn/

只要是宽度不起作用就使用display:block;