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

Posted 2021-12-09 JackieDYH

CSS的使用方式

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

CSS选择器

CSS常用属性

字体样式属性

CSS中的单位

外观样式属性

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

背景属性

盒子模型

• 盒子模型概念

所有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;
		}

• 内/外边距属性设置

• 一次设置多个值

• 外边距的计算

1. 水平外边距相加即可

2. 垂直外边距取最大值

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

浮动

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

• 浮动的特点

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

• 浮动的语法

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

• 清除浮动

clear的方式清除浮动

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

额外标签法清除浮动

	<div style="clear:both;"></div>

父级控制法清除浮动

/*此处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;
     }

定位

• 定位模式

• 偏移量

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

• 叠放次序

当多个元素设置定位时，定位的元素之间，有可能发生重叠的现象。对定位元素使用z-index属性来设置层叠的顺序。

z-index的默认值是0.可选值范围正整数、0和负整数。值越大，定位元素在层叠越优先。如果值相同，按照书写顺序匹配优先级。

z-index属性只针对定位元素有效。static也是无效的！！！！

• 定位总结

显示与隐藏

• 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>
        <form action="">
            <div>
                <label for="username">用户名</label>
                <input type="text" id="username">
            </div>
            <div>
                <label for="address">地址</label>
                <textarea name="address" id="address" cols="30" rows="10"></textarea>
            </div>
        </form>
    </div>

文字溢出控制

• 设置溢出内容是否换行

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

• 设置溢出内容样式

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

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