css常用干货 | 选择器 | 属性 | 盒子模型 - 知识点罗列

墨蓝 2022-08-28 05:39 157阅读 0赞

# CSS的使用方式 #

1. 内联样式：内联样式又称为行内样式，使用标签的style属性来设置，只能设置一个标签的样式。谨慎使用。
    2. 内部样式：写在head标签中的style标签内，只能设置当前页面的样式。酌情使用。
    3. 外部样式：单独的CSS文件，使用link标签的href属性引入。只要引入了该文件的页面都可以被设置样式。推荐使用。

# CSS选择器 #

![CSS至强干货][CSS]

![CSS至强干货][CSS 1]

![CSS至强干货][CSS 2]

# CSS常用属性 #

> 字体样式属性

![CSS至强干货][CSS 3]

## CSS中的单位 ##

![CSS至强干货][CSS 4]

## 外观样式属性 ##

![CSS至强干货][CSS 5]

## 标签切换模式切换(display属性) ##

![CSS至强干货][CSS 6]

## 背景属性 ##

![CSS至强干货][CSS 7]

![CSS至强干货][CSS 8]

# 盒子模型 #

*  盒子模型概念

> 所有HTML元素都可以看做是一个作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
> 
> 标准盒子模型（W3C盒子模型）：宽=内部宽度（content）+border+padding+margin
> 
> 怪异盒子模型（IE盒子模型）：宽=内部宽度（content+border+padding）+margin

*  边框

div{
    		/*设置四条边框都为1px宽度的蓝色实线*/
    		/*border:1px solid blue;*/
    		/*设置上边框为8px宽度的蓝色实线*/
    		border-top: 8px solid blue;
    		/*设置右边框为8px的红色双实线*/
    		border-right: 8px double red;
    		/*设置下边框为8px的黄色虚线*/
    		border-bottom: 8px dashed yellow;
    		/*设置左边框为8px的粉色圆点*/
    		border-left: 8px dotted pink;
    	}

*  内边距和外边距

> 1. 内边距padding用来设置边框与内部内容之间的距离，内边距会改变元素本身大小
> 
> 2. 外边距margin用来设置边框与边框之间（多个元素之间）的距离。通过外边距可以实现元素自身的居中

/*设置盒子居中要求必须指定宽度*/
    		div{
    			height:200px;
    			width:200px;
    			margin:0 auto;
    		}

*  内/外边距属性设置

![CSS至强干货][CSS 9]

*  一次设置多个值

![CSS至强干货][CSS 10]

*  外边距的计算

> 1. 水平外边距相加即可
> 
> 2. 垂直外边距取最大值
> 
> 3. 嵌套时的垂直外边距：如果父类元素没有上内边距和边框，则父元素的上外边距会与子元素的上外边框合并。合并后的外边距为两者中的最大值。

## 浮动 ##

> 元素设置浮动是让该元素脱离原本的标准文档流，移动到其父类中指定的位置的过程。

*  浮动的特点

浮:		 加了漂浮的元素盒子是浮起来的，漂浮在其他的标准流盒子之上。
    	漏：		加了漂浮的元素盒子不占据位置，原先的位置漏给标准流文档中的元素。
    	特：		浮动的盒子具有行内块的特性

*  浮动的语法

div{
    		height:200px;
    		width:200px;
    		/*设置元素左浮动*/
    		float:left;
    		/*设置元素右浮动*/
    		float:right;
    	}

*  清除浮动

clear的方式清除浮动

div{
    		/*清除左浮动*/
    		clear:left;
    		/*清除右浮动*/
    		clear:right;
    		/*清除所有浮动*/
    		clear:both;
    	}

额外标签法清除浮动

父级控制法清除浮动

/*此处div一定是已经有了浮动效果的元素的父级标签*/
    	div{
    		/*父级元素只要有overflow属性就可以自动清除浮动，取值hidden或auto都可以。*/
    		overflow:hidden;
    	}

after伪元素方式清除浮动

/*使用单独的标签来调用样式实现清楚浮动*/
         .clearfix::after{
             content: "";
             display: block;
             clear: both;
             height: 0;
             visibility: hidden;
         }
         .clearfix{
             /*IE8以下浏览器专用清除浮动代码*/
             *zoom:1;
         }

before+after双伪元素方式清除浮动

.clearfix::after,.clearfix::before{
             content: "";
             display: table;
         }
         .clearfix::after{
             clear: both;
         }
         .clearfix{
             *zoom:1;
         }

## 定位 ##

*  定位模式

![CSS至强干货][CSS 11]

*  偏移量

> 1.  left：表示元素左侧偏移量，相对于其父级左边框的距离
> 2.  right：表示元素右侧偏移量，相对于其父级右边框的距离
> 3.  top：表示元素上侧偏移量，相对于其父级上边框的距离
> 4.  bottom：表示元素下侧偏移量，相对于其父级下边框的距离

*  叠放次序

> 当多个元素设置定位时，定位的元素之间，有可能发生重叠的现象。对定位元素使用z-index属性来设置层叠的顺序。
> 
> z-index的默认值是0.可选值范围正整数、0和负整数。值越大，定位元素在层叠越优先。如果值相同，按照书写顺序匹配优先级。
> 
> z-index属性只针对定位元素有效。static也是无效的！！！！

*  定位总结

![CSS至强干货][CSS 12]

## 显示与隐藏 ##

*  display控制

> display控制隐藏的元素会释放空间

div{
    		/*设置元素显示*/
    		display:block;
    		/*设置元素隐藏*/
    		display:none;
    	}

*  visibility控制

> visibility控制隐藏的元素依然占据空间

div{
    		/*设置元素可见*/
    		visibility:visbile;
    		/*设置元素不可见*/
    		visibility:hidden;
    	}

*  overflow控制  
    overflow控制内容超出范围后的管理方案

div{
    		/*默认值，超出内容不做任何处理*/
    		overflow:visible;
    		/*超出内容隐藏*/
    		overflow:hidden;
    		/*超出内容增加滚动条*/
    		overflow:auto;
    		/*不管是否超出都增加滚动条*/
    		overflow:scroll;
    	}

## 界面样式 ##

*  鼠标样式

/*常用样式*/
    	div{
    		/*默认样式*/
    		cursor:default;
    		/*手指样式*/
    		cursor:pointer;
    	}
    
    
    	<ul>
    		<li style="cursor: crosshair;">十字线鼠标</li>
    		<li style="cursor: pointer;">连接样式（一只手）</li>
    		<li style="cursor: move;">可移动</li>
    		
    		<li style="cursor: e-resize;">向右拖动</li>
    		<li style="cursor: w-resize;">向左拖动</li>
    		<li style="cursor: n-resize;">向上拖动</li>
    		<li style="cursor: s-resize;">向下拖动</li>
    		<li style="cursor: ne-resize;">向右上拖动</li>
    		<li style="cursor: nw-resize;">向左上拖动</li>
    		<li style="cursor: se-resize;">向右下拖动</li>
    		<li style="cursor: sw-resize;">向左下拖动</li>
    		<li style="cursor: text;">文本标识</li>
    		<li style="cursor: wait;">等待标识</li>
    		<li style="cursor: help;">帮助文档</li>
    	</ul>

*  轮廓样式

> 1.  轮廓（outline）的语法设置和边框（border）的语法设置一致，但是设置轮廓不占据空间，设置边框会改变元素大小。
> 2.  边框可以设置圆角，轮廓不能设置
> 3.  一般给轮廓设置none，清除html标签自带的轮廓样式（input）

input{
    		/*清空轮廓样式，值给0效果也一样*/
    		outline:none;
    		/*设置粗细为1px的红色实线轮廓*/
    		outline:1px solid red;
    	}

*  文本域拖拽

> 默认情况下，谷歌火狐等浏览器可以让用户随意的拖动textarea标签的大小。设置resize值为none来禁用该功能。

textarea{
    		resize:none;
    	}

*  垂直对齐

> 使用vertical-align来设置文本的垂直对齐方式，该属性只对行级标签有效。

textarea{
                /*设置文本域禁止拖拽*/
                resize: none;
                /*基线对齐，默认值*/
                vertical-align: baseline;
                /*垂直对齐*/
                vertical-align: middle;
                /*顶部对齐*/
                vertical-align: top;
            }

## 文字溢出控制 ##

*  设置溢出内容是否换行

div{
    		/*默认值，自动换行*/
    		white-space:normal;
    		/*设置超出内容强制不换行*/
    		white-space:nowrap;
    	}

*  设置溢出内容样式

> 搭配overflow属性来实现超出内容自动截取并在最后追加省略号。

div{
    		overflow:hidden;
    		white-space:nowrap;
    		/*设置超出的内容被裁剪，并显示省略号*/
    		text-overflow:ellipsis;
    		/*设置超出内容直接裁剪，不显示省略号*/
    		text-overflow:clip;
    	}

[CSS]: /images/20220828/e1649c7e97d7474898a9a5a030733f80.png
[CSS 1]: /images/20220828/8514b0d1e39c44ff9b0a11dcac9dcb45.png
[CSS 2]: /images/20220828/b2a85594c40148f19ce5e231937a9424.png
[CSS 3]: /images/20220828/d7f276ea2aed4d748f2d63f77a53d213.png
[CSS 4]: /images/20220828/dbb27990493941cd8140a81060563ae7.png
[CSS 5]: /images/20220828/7544130a157b4dd0a9758099e172cd39.png
[CSS 6]: /images/20220828/b2908b736ca04f9b8a26383e8ec8ddc8.png
[CSS 7]: /images/20220828/b8f6bd0862194ea0876ad9661e8b3971.png
[CSS 8]: /images/20220828/0d5e6709bcba48c9933c4672bb85e7e8.png
[CSS 9]: /images/20220828/97f0f3ca6d104c5889d03b3a577625fb.png
[CSS 10]: /images/20220828/ccdfd2923629439fb07a5c0cd895c718.png
[CSS 11]: /images/20220828/166d39ca357f4881a36450e18692b25c.png
[CSS 12]: /images/20220828/83498808eeb946cf8ec89b326719acc9.png