前端--CSS
CSS
- 定义: 层叠样式表,修饰html结构,
- 作用: 让结构好看.
- css引入方式
- 内嵌式 <h1 style='font-size':10px; color:'yellow'>fly</h1>
- 内联式 <style type='text/css'> h1{font-size:30px;color:red}</style>
- 外链式 <link rel='stylesheet' type='text/css' href='./css/index.css'>
- 导入式 @import url('./css/iindex.css');
- 选择器
- 基础选择器
- * 通配符选择器
- 匹配所有的标签 ,通常不建议使用通配符,因为它会遍历并命中文档中所有的元素,处于性能考虑,需要酌情使用.
- #wrap id选择器
- 匹配以唯一标识符id属性等于wrap的对象作为选择符,唯一的只有一个.
- .类选择器
- 以class属性包含myclass的E对象作为选择符,不同于ID选择符的唯一性,类选择符可以同时定义多个.
- div 标签选择器
- 匹配div标签的选择器
- 高级选择器
- ul>li 子代选择器
- 只能命中子元素,而不能命中孙辈
- ul a 后代选择器
- 选择符将会命中所有符合条件的后代,包括儿子,孙子...
- li + a 相邻选择器
- 选择紧贴在li元素之后a元素
- li a 兄弟选择器
- 选择li元素后面的所有兄弟元素a
- 选择器的权重 - 行内样式1000>ID选择器100>类选择器10>标签选择器1
- 伪类选择器
- E:link 设置超链接a在未访问前的样式
- E:visited 设置超链接a在其链接地址已被访问过时的样式
- E:hover 设置元素在其鼠标悬停时的样式
- E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式
- E:focus 设置元素在成为输入焦点.(该元素)
- 属性选择器
- E[att] 选择具有att属性的E元素
- E[att='val'] 选择具有att属性且属性值等于val的E元素
- E[att^='val'] 选择具有att属性且属性值以val开头的E元素
- 伪元素选择器
- E:before 设置在对象前,(依据对象树的逻辑结构)发生的内容,用来和content属性一起使用,并且必须定义content属性.
- E: after 设置在对象后,(依据对象树的逻辑结构)发生的内容,用来和content属性一起使用,并且必须定义content属性.
- 字体font
- font-style
- font-weight
- font-size
- font-family
- 颜色 color
- Color Name
- 十六进制
- RGB
- RGBA
- 文本 text
- text-align left内容左对齐 right 内容右对齐 center 内容居中对齐 justify 内容两端对齐
- text-indent 文本的缩进
- text-decoration none文字无装饰 underline 下划线 overline 上划线 line-through 删除线
- line-height 指定文本字体的行高,字体最低端与字体内部顶端的距离,设置行高=盒子的高度,使文本垂直居中.
- 背景 background
- 盒模型
-width
- height
- border边框
- padding内边距
- margin外边距
- 浮动
- 浮动效果
- float:left 左浮动 左侧为起始,从左往右一次排列
- float: right 右浮动,右侧为起始,从右往左一次排列
- float: none 默认不浮动
- 文档流的概念: 可见元素在文档中的显示位置
- 浮动产生的效果: 浮动可以使元素按指定位置排列,直到遇到父元素的边界或另一个元素的边界停止.
- 浮动特性:
- 1.浮动可以使元素脱离文档标准流,不占位置
- 2.浮动会使元素提升层级,不建议
- 3.浮动可以使一块元素在一行排列,不设置宽高的时候,可以使元素适应内容
- 4. 浮动可以使行内元素支持宽高
- 浮动可以是元素脱离标准文档流,它可以使元素并排显示, 1.有贴边现象,2.有收缩现象(块元素转换成行内元素)3.只要盒子浮动了,不区分行内还是块级标签,可以任意的设置宽高.但是记住,要浮动一起浮动,要不浮动就不浮动.
- 浮动产生的问题
- 在页面布局中,一般情况父元素的高度是不设置的,通过子元素来填充它的高度,但是子元素设置浮动之后,不会撑开父元素的高度,因为子元素不占位置.
- 浮动解决方案:
- 1.给父盒子设置固定高度 - 缺点:不灵活
- 2.给浮动元素最后一个子元素后面添加一个空的块级元素,且该元素不浮动,设置clear:both -缺点: 结构冗余,无缘无故的添加了一个块级标签
- 3.官方写法: 建议这样去写, 给父盒子设置: clear fix:after{visibility:hidden;clear:both;display:block;content:'.';height:0}
- 4.给父元素添加overflow:hidden 推荐使用
- 定位
- static 默认没有定位
- relative
- 相对定位: 相当于自身进行定位 1.不设置偏移量的时候,对元素没有任何影响 2.可以提升层级关系 3.微调元素
- absolute
-1. 无父级元素定位时,以浏览器的左上角为基准
- 2.有父级元素的情况下,父级设置相对定位,自己设置绝对定位,是以父盒子为基准进行定位.
- fixed : 固定定位: 设置固定定位之后,当前元素不会发生改变,可以做小广告
- 页面布局小技巧: 通常情况下,浮动和定位要结合去用,大家也能看出来,一般盒子的排列,要横排盒子了我们用浮动,调成盒子中小元素的位置偏移量我们尽量用定位.
- z-index
- display
