css3相关笔记（五）

1.属性选择器补充
◆div[class~='box'] {}表示选中页面带有class属性并且属性值中必须包含一个box字符串的div并且要以box字符串开头，可以是独立的属性值，也可以不是完整的一条字符串，但是必须分割符号是空格。
◆div[class|='box'] {}表示选中页面带有class属性并且属性值中必须包含一个box字符串并且要以box字符串开头，可以是独立的属性值，也可以不是一条完整的字符串，但是分割符号是-号。


2.结构伪类选择器补充
◆div:only-child {} 表示找第一个父元素中只有一个div子元素（只找一个）。
◆div:only-of-type {}表示找所有父元素中只有一个div子元素（可以找多个）。
◆input::placeholder {}表示找到input标签中的placeholder属性值，可以用来修改这个属性值的默认样式（这是一个伪元素选择器，兼容性不是很好，需要加私有前缀，如input::-webkit-input-placeholder 这样子）。


3.颜色补充
◆其实工作中，UI会将设计图进行标注的，上面会有颜色值是多少，大小多少，字体字号及字体颜色等等都会标注的。


4.文本补充
◆文本换行：【
◇word-break:break-all;表示文本超过宽度了就会整体性的自动换行。
◇word-wrap:break-word;表示文本超过宽度了就会进行以打断单词的方式进行自动换行。
】
◆文本空白位置处理：【
◇white-space:pre;表示以正常显示空格的方式显示这段文本（不会再把所有的空格处理成只剩一个空格了）,不会自动换行，也不会被困在父容器中。
◇white-space:pre-wrap;表示以正常显示空格的方式显示这段文本（不会再把所有的空格处理成只剩一个空格了），当文字内容要超过父容器的宽度时，会自动换行，会被困在父容器中。
◇white-space:pre-line;表示以正常显示空格的方式显示这段文本（会将所有空白的去掉，但是不会去掉回车时那些空白行，只会去掉tab键和空格键的空白），当文字内容要超过父容器的宽度时，会自动换行，会被困在父容器中。
◇white-space:nowrap;表示以不显示空格的方式显示这段文本（会去掉所有的空格，并且强制在一行显示），就算文字超过父容器也不会进行换行，会被困到父容器中，由于强制不换行，于是会文字多余的部分会超出父容器，如果想换行只能够使用<br/>。
】
◆文字溢出：【
◇text-overflow:ellipsis;表示当文字强制在一行显示时（会依赖white-space:nowrap;），文字超出了父容器，超出的部分会被裁截掉并且以省略号来显示，通常还会配合overflow:hidden来使用，不过只能处理单行的文本文字溢出。
◇多行的文本文字溢出处理，非标准属性，可应用于移动端 【
p {
overflow:hidden;//超过的部分隐藏
text-overflow:ellipsis;//省略号
display:-webkit-box;//盒子
-webkit-line-clamp:2;//表示行数
-webkit-box-orient:vertical;//垂直方向
}
】。
◇后台也可以进行处理，计算一下有多少个字，切一下然后用省略号连接一下，最后传到前台即可。。
◇
◇
】
◆


5.圆角边框补充：
◆先看每一个圆角边框的垂直半径的长度，然后再看水平半径的长度，
实际就是一个矩形四个角，每个角的（0，0）点就是起点，每个角的垂直半径就是这个y轴的0点（y1）到半径指定长度的点（y2）,水平半径就是这个x轴的0点（x1）到半径指定长度的点（x2），将y2的的位置坐标与x2的位置坐标连起来，然后通过公式来计算一个弧度（这个公式不清楚，但是原理就是这样，重点理解y2与x2相连，然后想象一个弧度即可），也就是圆角边框的形状了。
◆当你的垂直半径或者水平半径同时等于你的高度和宽度，这时候如果设置的是第一个角和第二个角、第四个角和第三个角，则会进行平分处理，也就是你设置的垂直半径和水平半径都会进行除以2的操作，所以注意一下。


6.颜色渐变补充
◆如：linear-gradient(to left,yellow 50%,green 40%,blue 80%)；表示从0到50%这个区域是黄色的，但是green的百分比小于yellow的百分比，这时候green的百分比就会变成50%而不是40%，也就是说，后面的值如果大于前面的值，则会使用前面的值(百分比)，那么green就会从50%的位置渐变到蓝色了，由于没有100%，所以blue会从80%到100%的blue了。


7.媒体查询补充
◆css3的媒体查询时通过检测当前设备类型或设备特性来指定的css样式，设备类型包括：screen、print、all等，设备特性包括：width、height、device-width、device-height等。
◆使用媒体查询的方式一：link方式，<link rel="stylesheet" media="screen and (max-width:600px)" href="./css/main.css">表示媒体查询后符合要求了才会去使用这个脚本。
◆使用媒体查询的方式二：css3方式，@media screen and (max-width:600px) {background-color:red;}