HTML排版+CSS3基础讲解

HTML排版+CSS3基础讲解 图1

1、HTML的排版;什么是块儿级标签、行级标签、定位

1)块儿级标签

标题标签

<h1></h1>

h1--h6

*列表标签:ul/ol/dl

*排版标签:div/p/

表格标签:table

(2)行级标签:span/a/strong等

(3)定位

静态定位static(排版方式由上到下、由左到右)

相对定位relative(未脱离文档流)

绝对定位absolute(脱离文档流)

固定定位flxed(脱离文档流)

绝对定位与固定定位的相同点与不同点:

相同点:都脱离了标准文档流。

不同点:

1)绝对定位是根据他的父节点定位进行偏移的,不是相对于自己原来的位置发生偏移,也就是说他移动后他原来的位置就空了,后面的元素会自动移动上去,其次,他现在的位置也不在标准文档流当中,也就是说现在的他相当于浮动在标准文档流之上。

2)固定定位是根据body进行偏移的,不会随页面滚动条的滚动而发生位置变化。

2、全局通用样式
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;
}
3、CSS3样式简介

(参考地址: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文件导致页面布局错乱。

 

本文原创,作者:总裁视野,其版权均为原作者所有,文章内容系作者个人观点,不代表 张小宾自媒体 对观点赞同或支持。如需转载,请注明出处:https://www.zxbcctv.com/8044.html
6

发表评论