day03学习
思考
关于列表布局
如果遇到类似于多个项目item样式差不多的，最好优先使用列表布局，如ul>li与ol>li与dl>dt/dd这类，或者直接全部使用div进行flex布局。
布局结构
- margin :
margin-top,margin-right,margin-bottom,margin-left; - border :
border-top,border-right,border-bottom,border-left; - padding :
padding-top,padding-right,padding-bottom,padding-left; - width与height : 里面包含内容区，内容区包含多行行间元素(行内元素及行内块元素);
元素之间的间隙
元素之间的间隙实际上是源代码中换行符在浏览器中显示为换行符，而换行符在浏览器中会显示为空白字符。
- 解决方式，在父级上设置font-size为0，之后在元素自身设置字体真正的font-size。
white-space文字是否换行
white-space用来设置更精确一点的元素内空格处理方式。
-
white-space: normal默认值，表示浏览器以正常方式处理空格。- 文首的空格被忽略。若容器太窄，第一个单词溢出容器，然后在后面一个空格处换行。文本内部的换行符自动转成了空格。
-
white-space: nowrap，不会因为超出容器宽度而发生换行。- 所有文本显示为一行，不会换行。
-
white-space: pre，按照pre标签的方式处理。- 与原始文本完全一致，所有空格和换行符都保留了。
-
white-space: pre-wrap，基本还是按照pre标签的方式处理，唯一区别是超出容器宽度时，会发生换行。- 文首的空格、内部的空格和换行符都保留了，超出容器的地方发生了折行。
-
white-space: pre-line，意为保留换行符。除了换行符会原样输出，其他都与white-space:normal规则一致。- 除了文本内部的换行符没有转成空格，其他都与normal的处理规则一致。这对于诗歌类型的文本很有用。
overflow内容溢出内容区后如何处理
overflow是一个复合属性
- overflow-x: 只控制x的超出情况
- overflow-y: 只控制y的超出情况
overflow设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。
- 设置给被超出的元素。
可以设置的值:
- visible: 默认，内容不会被修剪，而是显示在元素的框外
- hidden: 超出内容被修剪，修剪掉的内容不可见，并且没有滚动条
- scroll: 超出内容被修剪，浏览器显示滚动条方便查看被修剪的内容
- auto: 浏览器定夺，如果内容超出就生成滚动掉，否则不生成
visilibity是否隐藏
控制元素显示或者隐藏
-
hidden:控制元素隐藏
- 保留原来的位置，其他元素的布局没有发生改变
- 相当于此元素变透明
- visibility属性是继承的，里边的子元素也全部都继承属性，并且隐藏了
- 如果给子元素设置visible覆盖，那么子元素可以进行显示
-
visible: 让
visibility: hidden隐藏的元素显示
opacity透明度
opacity指定一个元素的透明度
-
当opacity作用在某一个元素上的时候，把这个元素和里边的内容当成一个整体看待 即使里边的元素没有继承opacity。它也和父级有一样的透明度
-
opacity的取值是 1-0
- 1代表完全不透明
- 0代表完全透明
css选择器
在style样式里，大括号前面的都叫选择器
基础选择器
通配符选择器
*{}，表示所有的元素。
标签选择器
标签名{}，表示标签名对应的元素。
类选择器
.类名{}，class中包含该类名的元素。- 与标签的关系是多对多。
- 标签class属性中多个类名之间用空格隔开。
id选择器
#id名{}，id属性为该id名的元素。- 具有唯一性，如果有同名id，那么仅会在第一个id时生效(css还是有可能两个同名id的样式都生效的，但js用来选择时就不行了，只能选到第一个)。
属性选择器
- [属性名]，如：[id]，只要有id属性就能选中。
- [属性名=“属性值”]，如：[id=“fang”]，只要有id属性就能选中。
复杂选择器
子代选择器
- 父代>自己标识{}
后代选择器
- 直系祖先 自己标识{}
下面相邻兄弟选择器
- 前置兄弟+自己标识{}
通用兄弟选择器
- 前置兄弟+自己标识{}
群组选择器
又叫逗号选择器或和选择器。
- 选择器A,选择器B,选择器C{}
交集选择器
选择器A选择器B{}
伪类选择器
a标签相关
a:link有href属性并且该href属性并没有被访问过。a:hover鼠标悬浮到元素上面时的状态，这个不只a标签可以用。a:visited链接访问过后的状态。a:active被激活状态。
其它常见伪类
div:hover鼠标悬浮到元素上面时的状态。input:focus元素自身获取到焦点后的状态，此伪类仅适用于焦点元素本身。
CSS样式的优先级
-
同一个选择器权重相同，下面的覆盖掉上面的，层叠性。
-
不同选择器权重不同时，以权重高的为准。
浏览器默认自带值<继承<通配符选择器*<标签选择器、伪元素选择器<类选择器、属性选择器、伪类选择器<ID选择器<行内式<!important。
继承性
继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。
简单说就是给父元素设置一些属性，子元素/后代也可以使用，这个我们称之为继承性。
并不是所有的属性都可以继承, 以color/font-/text-/line-开头的属性、元素可见性：visibility 。
常用类型
cursor设置光标的类型
-
设置自定义图标。
.class3{ cursor: pointer; } -
引入第三方图标。
.class3{ cursor: url(./arrow.cur) 6 9, pointer;/* 这个arrow.cur是从网上找的，浏览器一般仅支持cur或svg。 */ }
user-select元素内文本是否可选中
- user-select元素内文本是否可选中
