HTML排版+CSS3基础讲解
1)块儿级标签
标题标签
<h1></h1>
h1--h6
*列表标签:ul/ol/dl
*排版标签:div/p/
表格标签:table
(2)行级标签:span/a/strong等
(3)定位
静态定位static(排版方式由上到下、由左到右)
相对定位relative(未脱离文档流)
绝对定位absolute(脱离文档流)
固定定位flxed(脱离文档流)
绝对定位与固定定位的相同点与不同点:
相同点:都脱离了标准文档流。
不同点:
1)绝对定位是根据他的父节点定位进行偏移的,不是相对于自己原来的位置发生偏移,也就是说他移动后他原来的位置就空了,后面的元素会自动移动上去,其次,他现在的位置也不在标准文档流当中,也就是说现在的他相当于浮动在标准文档流之上。
2)固定定位是根据body进行偏移的,不会随页面滚动条的滚动而发生位置变化。
body{ font-family: 微软雅黑; font-size: 14px; color: #333; } a{ text-decoration: none; cursor: pointer; color: #333333; } ul{ list-style: none; } input{ border: none; outline: none; background: none; box-shadow: none; } table{ /* 合并边框模型 */ border-collapse: collapse; } img{ /* IE11以下图片会出现边框线 */ border:none; } .name3 ul li:first-child{ color: #fff; }
(参考地址:https://segmentfault.com/a/1190000017138873)
3.1display:flex;弹性布局
display:flex是一种布局方式。可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
flex的常见属性:
justify-content:space-between;元素在主轴(页面)上左右两端或者上下两端开始排列
justify-content:space-around;每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍。
justify-content:center;元素在主轴(页面)上居中排列
flex-direction:column;让元素沿垂直主轴从上到下垂直排列
3.2选择器
CSS3新增了许多灵活查找元素的方法,能够极大的提高我们查找元素的效率和精准度。选择器分别分为:属性选择器、伪类选择器、伪元素选择器。
(1)属性选择器
属性选择器就是通过属性来选择元素:
选择器 | 含义 |
[attr] | 存在attr属性即可 |
[attr=val] | 属性值完全等于val |
[attr*=val] | 属性值里包含val字符并且在“任意”位置 |
[attr^=val] | 属性值里包含val字符并且在“开始”位置 |
[attr$=val] | 属性值里包含val字符并且在“结束”位置 |
(2)伪类选择器
伪类元素中重点是结构伪类元素
选择器 | 含义 |
:fist-child | 其父元素的第1个子元素 |
:lase-child | 其父元素的最后1个子元素 |
:nth-child(n) | 其父元素的第N个子元素 |
:nth-last-child(n) | 其父元素的第N个子元素(倒着数) |
(3) 伪元素选择器
1、::first-letter文本的第一个单词或字(如中文、日文、韩文等)
2、::first-line文本第一行;
3、::selection可改变选中文本的样式;
4、::before和::after
CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下:after、:before会被自动识别为::after、::before,这样做的目的是用来做兼容处理。
3.3文本阴影
text-shadow:2px2px2px#CCC;
1、水平偏移量正值向右负值向左;
2、垂直偏移量正值向下负值向上;
3、模糊度是不能为负值;
4、阴影颜色
注意:
1、在写新页面时不要引入无关的css文件,简单的页面尽量自己去写样式,这样第一可以减少代码量,提高页面的加载速度;
2、能够减少页面在引入无关的css文件导致页面布局错乱。