HTML和CSS常见问题整理

盒子模型

对于现代浏览器来说，css中指定的width就是content width。

对于IE5.x和6来说，在怪异模式中width等于content、左右padding和左右border。

其中padding和margin的4种写法。

1、上右下左

padding:10px 5px 15px 20px;

2、上右左下

padding:10px 5px 15px;

3、上下右左

padding:10px 5px;

4、四边一致

padding:10px;

display和position介绍

display规定元素应该生成的框的类型。

值	描述
flex	设置弹性容器
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
none	此元素不会被显示。
list-item	此元素会作为列表显示。

position: 指定一个元素在文档中的定位方式，top，right，bottom和 left 属性则决定了该元素的最终位置。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 left 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

CSS选择器分类

不同级别：排序：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。

同一级别：后写的会覆盖先写的。
em和strong的区别
- em（emphasize）强调，表示语义上的强调，默认为斜体
- strong着重，表示重要性的一种强调，strong是比em更强烈的强调，默认为粗体
使元素消失的方法
- opacity：0：该元素隐藏起来，但不会改变页面布局，如果该元素绑定了事件会触发。
- visibility:hidden：该元素隐藏起来，但不会改变页面布局，不会触发该元素已经绑定的事件。
- display:node：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。
如何画一个三角形

左右边框设置为透明，长度为底部边框的一半。左右边框长度必须设置，不设置则只有底部一条边框，是不能展示的。
```
.child{width: 0;height: 0;border-bottom: 100px solid cyan;border-left: 50px solid transparent;border-right: 50px solid transparent;
}
```
浮动相关
- 为什么要清除浮动
  
  主要是为了解决父元素高度坍陷问题。
  
  一个块级元素如果没有设置height,其height由子元素撑开，对子元素使用了浮动之后，子元素就会脱离文档流。那么父元素中没有内容撑开其高度，这样父元素的height就会被忽略。
- 如何清除
```
1、父元素设置overflow: hidden(少用)2、clearfix：使用内容生成的方式清除浮动，不会破坏文档流。.clearfix: after {    // :after选择器向选定的元素之后插入内容content:"";   // 生成内容为空display: block;  // 块级元素显示clear:both;      // 清除前面元素}
```

行内元素居中
```
.parent {text-align: center
}
```

DIV居中问题

1、使用flex

.parent {height: 600px;border: 1px solid red;display: flex; justify-content: center;align-items: center;
}
.child {border: 1px solid green;width: 300px;
}

2、使用transform

.parent{height: 600px;border: 1px solid red;position: relative;
}
.child{border: 1px solid green;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}

3、使用margin-top -一半的高度

.parent{height: 600px;border: 1px solid red;position: relative;
}
.child{border: 1px solid green;width: 300px;height: 100px;position: absolute;top: 50%;left: 50%;margin-left: -150px;margin-top: -50px;
}

4、使用绝对布局absolute和margin:auto

.parent{height: 600px;border: 1px solid red;position: relative;
}
.child{border: 1px solid green;position: absolute;width: 300px;height: 200px;margin: auto;top: 0;bottom: 0;left: 0;right: 0;
}

三栏布局

要求两边两栏宽度固定，中间栏宽度自适应

方案一：position绝对定位法

center的div需要放到后面，将左右两边使用absolute定位，因为绝对定位使其脱离文档流，最后面的center会显示在正常文档流中，然后设置margin属性，留出左右两边的宽度。

.parent {border: 1px solid red;position: relative;
}.child_left {width: 100px;height: 100px;border: 1px solid gray;position: absolute;
}.child_right {width: 100px;height: 100px;border: 1px solid green;position: absolute;right: 0;
}// div在html中必须放在left和right之后
.child_center {width: 100px;height: 100px;border: 1px solid black;margin: auto
}

方案二：float 自身浮动法

center的div需要放到后面，对左右使用float:left和float：right，float使左右两个元素脱离文档流，中间的正常文档流中，然后设置margin属性，留出左右两边的宽度。

.parent {border: 1px solid red;position: relative;
}.child_left {width: 100px;height: 100px;border: 1px solid gray;float: left;
}.child_right {width: 100px;height: 100px;border: 1px solid green;float: right;
}.child_center {width: 100px;height: 100px;border: 1px solid black;margin: auto
}

介绍BFC

BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素。
- 如何生成BFC：（即脱离文档流）
  - 1、根元素，即HTML元素（最大的一个BFC）
    2、float的值不为none
    3、position的值为absolute或fixed
    4、overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）
  - 5、display的值为inline-block、table-cell、table-caption
- BFC布局规则：
  - 1.内部的Box会在垂直方向，一个接一个地放置。
    
    2.属于同一个BFC的两个相邻的Box的margin会发生重叠
    
    3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置float
    
    4.BFC的区域不会与float box重叠。
  - 5.计算BFC的高度，浮动元素也参与计算
- BFC作用：
  - 1.自适应两栏布局
    2.可以阻止元素被浮动元素覆盖
    3.可以包含浮动元素---清除内部浮动原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内
  - 4.分属于不同的BFC时，可以阻止margin重叠
CSS3特性 vh和vw
- vh 相对于视窗的高度，视窗高度是100vh
- vw 相对于视窗的宽度，视窗宽度是100vw
这里是视窗指的是浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
- 可以通过**@supports**来判断是否支持某个css属性。
```
@supports (property: value){element {property: value;}
}// 例
@supports (display: flex){.flex {display: flex;float: none;}
}
```

HTML和CSS常见问题整理相关推荐

XHTML CSS 常见问题和解决方案
作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,这时就需要寻找这些 XHTML及CSS常见问题的解决方案.我根据自己的经验和心得挑选和整理了一些XHTML常见问题和CSS常见问题 ...
Android 笔试/面试，常见问题整理
Android 笔试/面试,常见问题整理 Android学习书籍下载的网址:http://pan.baidu.com/s/1slCSUcP 上面网盘里面的书籍都是PDF格式的,有面试宝典,疯狂java ...
初学者css常见问题_5分钟内学习CSS Grid-初学者教程
初学者css常见问题 Grid layouts are fundamental to the design of websites, and the CSS Grid module is the mo ...
css不换行属性_那些不常见，但却非常实用的css属性(整理不易)
1.-webkit-line-clamp 可以把块容器中的内容限制为指定的行数.并且在超过行数后,在最后一行显示"..." 这是正常的展示 display: -webkit-b ...
初学者css常见问题_5分钟内学习CSS-初学者教程
初学者css常见问题关于网络设计语言的快速教程. (A quick tutorial on the design language of the web.) CSS (Cascading Style ...
HTML CSS 学习整理
HTML CSS 学习整理码字不易,转载请务必注明原文出处.常用单位整理,不断学习,后期的新增笔记会继续加到文章上方点击链接后退页面: 回到上一个网页这是一个简单的跳转页面操作 --修改plac ...
【环信IM集成指南】iOS端常见问题整理（1）
1.集成IM如何自定义添加表情组集成环信IM自定义添加表情组 - IM Geek开发者社区-移动开发者社区-开源社区-IM Geek官网 2.旧版音视频与EaseCallKit兼容升级方案旧版音视 ...
【环信IM集成指南】iOS端常见问题整理（2）
[环信IM集成指南]iOS端常见问题整理(1-15) 16.后端该如何操作用户上麦后端无法直接控制让谁上麦,所以只能通过发送CMD消息的方式来和移动端进行交互,移动端根据逻辑指令去操作 17.使用[ ...
电脑常见问题整理过年送父母的礼物
电脑常见问题整理过年送父母的礼物 2012年01月09日 1,了解电脑死机的原因:[病毒木马感染[CMOS设置不当][系统文件的误删除][动态链接库文件(DLL)丢失][硬盘剩余空间太少或碎片太多] ...

HTML和CSS常见问题整理

HTML和CSS常见问题整理相关推荐

最新文章

热门文章