css布局基本知识

一，. 页面导入样式时，使用link和@import有什么区别？

语法的角度：

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；

而@import是CSS提供的语法，只能用于加载CSS;

浏览器解析的角度

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载(标准浏览器);

兼容性问题

import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

总之，link要优于@import,由此决定了它的适应性更广，加载性更快，兼容性更强。

二.清空浮动的方法有哪些？哪个更好？

 

方式一:使用overflow属性来清除浮动

 

.ovh{

overflow:hidden;

 

　}

 

 先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.

 

 注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.

 

 方式二:使用额外标签法

　.clear{

 

 　clear:both;

　}

 

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

 

a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.

 b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.

注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

 

 方法三:使用伪元素来清除浮动(after意思:后来,以后)

 

 .clearfix:after{

 

 centent:"";//设置内容为空

　height:0;//高度为0

　line-height:0;//行高为0

 

　display:block;//将文本转为块级元素

 

　visibility:hidden;//将元素隐藏

　clear:both//清除浮动

} 

　.clearfix{

 

 　zoom:1;为了兼容IE

 

}

三.CSS 选择符及继承性和优先级算法，伪类

可继承性

可继承属性

font-size font-family color,ul,li,dd,dt;

不可继承的属性

border padding margin width height

优先级

就近原则:同权重情况下样式定义最近者为准,载入样式以最后载入的定位为准;

优先级算法: !important > id > class > tag

四. CSS3新增伪类

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

五.display vs position

display:block|inline-block|list-item|none

position

absolute :生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

fixed :（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

relative:生成相对定位的元素，相对于其正常位置进行定位。

static :默认值。没有定位，元素出现在正常的流中, （忽略 top, bottom, left, right z-index 声明）

inherit: 规定从父元素继承 position 属性的值。

六. CSS3新特性

CSS3实现圆角（border-radius:8px），

阴影（box-shadow:10px），

对文字加特效（text-shadow、）

线性渐变（gradient）

旋转（transform）

ransform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)

skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba

七.圣杯双飞翼布局

圣杯：Html:

<div id="header">Header</div>

<div id="bd">

    <div id="main">main</div>

    <div id="left">left</div>

    <div id="right">Right</div>

</div>

<div id="footer">Footer</div>

Css:

body{

    margin: 0px;

    padding: 0px;

}

#header,#footer{

    width:100%;

    background: #666;

    height:50px;

}

#bd{

    padding-left:150px;

    padding-right:190px;

background: red;}

#left{

    background: #E79F6D;

    width:150px;

    float:left;

    margin-left:-100%;

    position: relative;

    right:150px;}

#main{

    background: #D6D6D6;

    width:100%;

    float:left;}

#right{

    width: 190px;

    float: left;

    background:greenyellow;

margin-left: -190px;

    position: relative;

    left: 190px;

}

双飞翼：html：

<div id="header">Header</div>

<div id="main">

    <div id="inner">

        Main

    </div>

</div>

<div id="left">Left</div>

<div id="right">Right</div>

<div id="footer">Footer</div>

Css：

body{

    padding:0;

    margin:0

}

#header,#footer{

    width:100%;

    background: #666;

    height:50px;

    clear: both;

}

#main {

    background: #D6D6D6;

    width: 100%;

    float: left;

}

#inner{

    margin-left:150px;

    margin-right:190px;

}

#left{

    background: #E79F6D;

    width:150px;

    float:left;

    margin-left:-100%;

}

#right{

    background: #77BBDD;

    width:190px;

    float:left;

    margin-left:-190px;

}

八负margin的作用：

 

实现圣杯双飞翼布局

增加未设置宽度的元素的自身宽度

去掉浮动列表的右边框

和绝对定位一起实现水平垂直居中

去除列表最后一个li元素的border-bottom

 

去掉浮动列表的右边框：

<div id="wrap">

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

    </ul>

</div>

Css：

*{

    margin: 0;

    padding: 0;

}

#wrap{

    background-color:orange;

    width: 320px;

    height: 320px;

    overflow: hidden;

 

}

ul{

    zoom:1;

    margin-right: -10px;

}

li{

    float: left;

    width: 100px;

    height: 100px;

    margin-right: 10px;

    margin-bottom: 10px;

    list-style: none;

    background-color: red;

}

和定位一起实现水平垂直居中：

#box{

    width: 100px;

    height: 100px;

    background-color: brown;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -50px;

    margin-left: -50px;

}

 

实现水平垂直居中

 

用绝对定位实现

 

#box{

        width: 100px;

        height: 100px;

        background-color: red;

        position: absolute;

        top: 50%;

        left: 50%;

        margin-left: -50px;

        margin-top:-50px;

    }

用绝对定位和auto实现

 

#box{

        width: 100px;

        height: 100px;

        background-color: red;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        margin: auto;

    }

用绝对定位和transform反向偏移实现：

 

#box{

        width: 100px;

        height: 100px;

        background-color: red;

        position: absolute;

        top: 50%;

        left: 50%;

        transform:translate(-50%,-50%);

        -webkit-transform: translate(-50%, -50%);

        -ms-transform: translate(-50%, -50%);

    }

用flex实现

 

首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。

 

#dad {

display: flex;

justify-content: center;

align-items: center

}

九，src和herf的区别：

herf：指向网络资源所在位置，用于超链接。

src：指向外部资源，指向的内容会嵌入到文档中当前位置，在请求src资源时会将其指向的资源下载并应用到文档中。

十，标准盒模型和IE盒模型的区别：

标准：content部分不包括其他

IE:width包括了boder和padding

 

转载于:https://www.cnblogs.com/xxjj/p/7528318.html