培训-布局(H5、CSS)

1、标签初始化

(1) 很多标签自带margin、padding。在使用前设置为0。不建议设置*

(2) a 下划线去除

(3) li 去除左侧点

(4) i 去除斜体

(4) 添加清除浮动伪类 clearfix

html,body,div,ul,li,h1,h2,h3,h4,h5,table,p,span,img,a,label,i {
    margin:0;
    padding:0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
i {
    font-style:normal
}
clearfix:after{
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

2、行、块元素

行元素:

a，span, i, label, img, input...

块元素:

div、table、h1-h6、p、ul、li...

表现形式:

(1) 行元素不独占一行，不能设置宽高

(2) 块元素独占一行，能设置宽高

(3) 行内块元素不独占一行，但是可以设置宽高

行、块转换:display

变行: display:inline;

变块: display:block;

变行内块: display:inline-block;

3、居中

行标签:

​ 水平：text-align:center;

​ 垂直：line-height: 父元素高度；

块元素：

​ 水平：margin: 0px auto;

​ 垂直：(1) 定位position。已知块的宽和高，使用绝对定位

​ (2) display:flex。 父元素添加display:flex; 子元素添加margin:auto。

4、定位

绝对定位：position:absolute。

绝对定位元素的未知相对于最近的已定位的父元素。如果元素没有已经定位的父元素，那么它的相对位置相对于

常用案例：块元素居中

{
    position:absolute;
    width:300px;
    height:300px;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top: -150px;
}

相对定位：position:relative。

正常文档流。相对于正常位置。

固定定位：position:fixed。

相对于浏览器窗口。浏览器中存在滚动条且发生滚动时，它不会移动。

常用案例：头部定位导航条、左下角留言板。

5、浮动

意义：脱离正常的文档流,摆脱了块级元素和行内元素的限制。

使用：float ->left;/right;

影响：高度塌陷

当有浮动的子元素存在高度时，如果父元素没有设置浮动，此时子元素不会撑起父元素，父元素的高度消失。如果不清楚浮动，往后的dom元素也会存在高度上的影响。在这种情况下需要清除浮动。

清除：(1) 伪类(推荐)

clearfix:after{
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

(2) overflow:hidden;

(3) 兼容IE6 zoom:1

6、浏览器页面前端自适应方案

(1) 常见概念：

px：像素，屏幕上显示数据的最基本的点。width:100px；

屏幕分辨率: 1920*1080 -》宽度上1920个像素点，高度上1080个像素点。

rem：相对于根元素font-size的长度单位。 font-size:0.9rem;

em：相对于父元素font-size的长度单位。font-size:0.9em; 几乎不用。

vw:视窗宽度，移动端。1wm = 视窗宽度的1%;

vh：视窗高度，移动端。 1vh = 视窗高度的1%；

(2) 方案

纯css - 百分比方案+媒体查询方案+rem(常用)

大布局用百分比，小调整用媒体查询,字体控制用rem。

对于较大的定位区域，比如整个页面、左侧菜单区域、右侧内容区域。

calc()在声明css属性时执行一些计算，用于计算不确定值。一般用calc() 去解决像素溢出问题。

html:

<div class="container">
	<div class="header">头部</div>
	<div class="mainbody clearfix">
		<div class="sider">左侧菜单区域</div>
		<div class="content">右侧内容区域</div>
	</div>
</div>

css:

.container {
    width:100%;
    height:100%
}
.header {
    width:100%;
    height：60px;
}
.mainbody {
    width:100%;
    height:calc(100% - 60px)
}
.clearfix:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.sider {
    float:left;
    width:200px;
    height:100%;
}
.content {
    float:right;
    width:calc(100% - 200px);
    height:100%;
}

局部调整用媒体查询@media

@media screen and (min-width:1600px) and (max-width:1920px){
    
}
@media screen and (min-width:1367px) and (max-width:1599px){
    
}
@media screen and (min-width:1091px) and (max-width:1366px){
    
}
@media screen and (min-width:768px) and (max-width:1090px){
    
}

字体控制用rem

当页面调整时只需根据当前显示区域大小修改html的font-size。

借助js - rem方案(不推荐)

js 动态修改html文字大小，在页面缩放时重新调整rem的大小。

对于页面的放大缩小实际是改变了可是区域的大小，也可以用@media去调整。

动态获取浏览器缩放比例的方法

function detectZoom() {
            var ratio = 0,
                screen = window.screen,
                ua = navigator.userAgent.toLowerCase();

            if (window.devicePixelRatio !== undefined) {
                ratio = window.devicePixelRatio;
            }
            else if (~ua.indexOf('msie')) {
                if (screen.deviceXDPI && screen.logicalXDPI) {
                    ratio = screen.deviceXDPI / screen.logicalXDPI;
                }
            }
            else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
                ratio = window.outerWidth / window.innerWidth;
            }

            if (ratio) {
                ratio = Math.round(ratio * 100);
            }
            return ratio;
        }

备注：设置宽度/高度百分比一定要保证父元素的宽度/高度有确定值(可以是百分比，可以是px等)。否则设置的百分比无效。

7、css优先级

(1) css具有继承性

应用在标签上的css会影响其子标签，但是子标签的直接样式优先级高于父标签样式。

(2) 样式优先级：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

属性选择器

input[type = "text"]
{
    width:200px;
    height:30px;
}

伪类选择器

input:first-child{
    width:200px;
    height:30px;
}

伪元素选择器 :before :after

(3) css可覆盖，同级别、同路径下样式，后者覆盖前者。 主要用于样式覆盖。

(4) css样式嵌套层级越深，优先级越高。

.A .B .C > .A .C

可用于换肤，菜单样式切换。

8、其他常用css

(1) 单行文本溢出添加省略号

{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

(2) 多行文本溢出添加省略号

chrome实现方法：不兼容IE及其他浏览器

{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
 }

IE及其他浏览器实现方法：

使用插件clamps .js

插件下载地址：https://github.com/josephschmitt/Clamp.js

使用：

	// 引入
	<script src="js/Clamp.js-master/clamp.js"></script>
	// 样式
    <style>
        .divarea {
            width: 300px;
            height: 84px;
        }

        p {
            width: 100%;
        }
    </style>
    // html 
    <div class="divarea">
        <p>这两个选择元素的API,ualCrew小组耗时两年翻译，保持与D3 V3最后一版（3.5.17）一致.D3 V4最新版API请参考d3.v4-API翻译</p>
    </div>
    // js
    <script>
    $(document).ready(function () {
        $clamp($(".divarea p")[0], {
            clamp: '3'
        })
    })
</script>

(3) 三角形绘制

{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}