HTML-CSS Basis

Margin

Refers to the distance from the outer box and the other between the current box, it does not affect the size of the visible frame, but will affect the position of the box.

The box has four directions from outside

margin-top

margin-right

margin-bottom

margin-left

Because the page elements are placed on the left on, so pay attention to when we set up and left margins will lead to a change in the location of the box itself. If you set the right and bottom margin may change the position of the other box. If you set the margins is negative, then the element will move in the opposite direction.

margin may also be set to auto, auto margin typically provided only to the horizontal direction, if specified, the left or right margins for the margin auto margins of the margins will be set to the maximum, if the vertical margins set to auto, the margins default is 0.

If the left and right at the same time set to auto, it will be centered.

Vertical margins overlap

Page adjacent outer vertical direction away from the outer overlap occurs, the term refers to the overlapping margins of adjacent outer distance between siblings can take the maximum rather than summing.

You can enter a number between two adjacent elements

Or a set margins and padding

The browser's default style

Browser in order without style page, you can also have a good effect, so set some default margin and padding to a lot of elements, and it's the default style, under normal circumstances, we do not need to use. So we often need to change the default margin and padding browser all removed before writing style.

Clear the browser's default style:

padding:0;

margin:0;

}

Inline box model element

Inline element width and height can not be set, but the padding may be provided in the horizontal direction, the vertical direction may be provided within the margins, but does not affect the layout of the page. Inline elements may be provided borders, but the vertical border will not affect the layout of the page, the page layout can affect the horizontal direction.

Inline elements outside the horizontal direction from the support, adjacent the horizontal direction from outside do not overlap, but the summation. Inline element does not support the vertical margins.

display

The inline element into a block element, the element type can be modified by a display style

inline: an element may be displayed as an inline element

block: a block element arranged element may be displayed

inline-block: converting element within a row block elements, the characteristics of an element can be made of both the inline elements have characteristics of the block element, provided both high line, and would not on its own line.

none: Use this mode to hide elements are not displayed on the page, and the page no longer occupy the position.

visibility

It can be used to set the display state of the element and hide. The default value is visible, the element will be displayed on the page by default. hidden element will be hidden from display, but its position will remain.

overflow

The default child element is present in the content area of the parent element, the size of the sub-element theory exceeds the maximum equal to the parent element's content area can be the parent element, and more than the size of the parent element will appear in unexpected positions over the parent element content, we called the spill the contents, the parent element outside the display can be set by the parent element of how to handle the overflow overflow content

Optional values:

- scroll: add scroll bars, scroll bars, regardless of whether the content overflow, will add horizontal and vertical directions.

- auto: add scroll bars as needed

- hidden: hidden content beyond the box

- visible visible visible: the default value

Document flow

Document flow at the bottom of the page, it indicates the location of a page, we create the elements are in default flow of the document.

Elements in the document flow characteristics

Block elements in the document will flow on its own line, since the block elements will be arranged downward. The default block elements in the width of the document flow of the parent element is 100%. Block elements in the default height is stretched flow of the document content.

Inline elements in the document flow in only their size, from left to right by default, if not enough to accommodate all the inline elements in a row, the next line will continue from left to right. Default width and height of the inline elements have been softened content.

When the width of the element is auto, this case does not affect the specified margins visible frame size, but will automatically modify the width to fit the padding.

float

The default block elements arranged vertically in the flow of the document, so the three div from top to bottom in turn arranged, if desired block element arranged horizontally on the page, may be to block element from the document flow. Float to make use of floating elements, thereby disengaging the document flow.

Optional values:

- none: do not float

- left: left-floating

- right: right-floating

当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动看，元素移动后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或者其他的浮动元素，如果浮动元素上边是一个没有浮动的元素，则浮动元素不会超过块元素。浮动的元素不会超过它上边的兄弟元素，最多最多一边齐。

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果。

当元素设置浮动以后，会完全脱离文档流，块元素脱离文档流以后，高度和宽度都被内容撑开。内联元素脱离文档流以后会变成块元素。

简单布局

高度塌陷问题

在文档流中，父元素的高度默认就是被子元素撑开的，也就是说子元素多高，父元素就多高。但是为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素高度塌陷，则父元素下的所有元素都会向上移动。这样将会导致页面布局混乱。所以在开发中一定要避免出现的高度塌陷的问题，我们可以将父元素的高度写死，以免塌陷的问题出现，但是一定高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的！

解决高度塌陷问题

根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。当开启元素的BFC以后，元素将会具有如下的特性：

父元素的垂直外边距不会和子元素重叠

开启BFC的元素不会被浮动元素所覆盖

开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC

设置元素浮动——使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题。

设置元素绝对定位

设置元素为inline-block——可以解决问题，但是会导致宽度丢失，不推荐使用这种方式。

将元素的overflow设置为一个非visible的值

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做haslayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开haslayout来解决该问题。开启方式有很多，我们直接使用一种副作用最小的——直接将元素的zoom设置为1即可。

zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍，zoom:1;表示不放大元素，但是通过该样式可以开启haslayout。zoom这个样式只在IE中支持，其他浏览器都不支持。

clear可以用来清除其他浮动元素对当前元素的影响，可选值：

none：默认值，不清除浮动

left：清除左侧浮动元素对当前元素的影响

right：清除右侧浮动元素对当前元素的影响

both：清除两侧浮动元素对当前元素的影响，清除影响对它最大的那个元素的浮动。

清除浮动以后，元素会回到其他元素浮动之前的位置。

解决高度塌陷方案二

可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以它是可以撑开父元素的高度的，然后进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。或者通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。

.clearfix:after{

content:"";

displayP:block;

clear:both;

}

......

导航条练习

开班信息练习

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

}

body{

font: 12px/1 宋体;

}

.outer{

width: 300px;

margin: 50px auto;

}

.title{

border-top:2px #019e8b solid;

height: 36px;

background-color: #f5f5f5;

line-height: 36px;

padding: 0 22px 0 16px;

}

.title a{

float: right;

color: red;

}

.title h3{

font: 16px/36px "微软雅黑";

}

.content{

border: 1px solid #deddd9;

padding: 0 28px 0 20px;

}

.content a{

color: black;

text-decoration: none;

font-size: 12px;

}

.content a:hover{

color: yellowgreen;

text-decoration: underline;

}

.content h3{

margin-top:14px ;

margin-bottom: 16px;

}

.content .right{

float: right;

}

ul{

list-style: none;

border-bottom:1px dashed #deddd9;

}

.content .border{

border: none;

}

.content .red{

color: red;

font-weight: bold;

}

.content li{

margin-bottom: 15px;

}

</style>

</head>

<body>

<a href="#">16年面授开班计划</a>

</div>

<h3><a href="">JavaEE+云计算-全程就业班</a></h3>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

<h3><a href="">Android+人工智能-全程就业班</a></h3>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

<h3><a href="">前端+HTML5-全程就业班</a></h3>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

</html>

相对定位与绝对定位

定位：定位指的是将指定的元素放到页面的任意位置，通过定位可以任意的摆放元素。通过position属性来设置元素的定位

可选值：

static：默认值，元素没有开启定位

relative：开启元素的相对定位

当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生了变化。相对定位是相对于元素在文档流中原来的位置进行定位。相对定位的元素不会脱离文档流。相对定位会使元素提升一个层级。相对定位不会改变元素的性质，块还是块，内联还是内联。

通常偏移量只需要使用两个就可以对一个元素进行定位。

absolute：开启元素的绝对定位

开启绝对定位，会使元素脱离文档流。开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化。绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位），如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。绝对定位会使元素提升一个层级。绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开。

fixed：开启元素的固定定位（也是绝对定位的一种）

固定定位是一种绝对定位，它的大部分特点和绝对定位一样。不同的是固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动。IE6不支持固定定位。

元素层级

如果定位元素的层级是一样的，则下边的元素会盖住上边的，通过z-index属性可以用来设置元素的层级，可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级。层级越高，越优先显示。对于没有开启定位的元素不能使用z-index。父元素的层级永远盖不住子元素的层级。

透明背景

opacity可以用来设置元素背景的透明，它需要一个0~1之间的值，0表示全透明，1表示完全不透明，0.5表示半透明。opacity属性在IE8及以下的浏览器中不支持，IE8及以下的浏览器需要使用如下属性代替alpha(opacity=透明度)。透明度，需要一个0~100之间的值，0表示完全透明，100表示完全不透明，50为半透明。

背景

background-color:red;

使用background-image:url(相对路径);来设置背景图片，如果

背景图片大于元素，默认会显示图片的左上角

背景图片和元素一样大，则会将背景图片全部显示

背景图小于元素大小，则会默认将背景图片平铺以充满元素

可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色。

用background-repeat:repeat;来设置背景图片的重复方式，可选值：

repeat：默认值，背景图片会双向重复（平铺）

no-repeat：背景图片不会重复，有多大就显示多大

repeat-x：背景图片沿水平方向重复

repeat-y：背景图片沿垂直方向重复

用background-position：center center；来设置背景图片的位置（九宫格）用right、left、center、top、bottom。第一个值是左右，第二个值是上下。如果只给出一个值，则第二个值默认值是center。也可以直接指定两个偏移量，第一个值水平偏移量，第二个是垂直偏移量。如果是正值就向右或下偏移，如果是负值就向左或上偏移。

用background-attachment:fixed;来设置背景图片是否随页面一起滚动，可选值：

scroll：默认值，背景图片随着窗口滚动

fixed：背景图片会固定在某一位置，不随页面滚动

不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素。

按钮练习

产生闪烁的原因：背景图片是以外部资源加载进网页的，浏览器没加载一个外部资源就需要单独的发送一次请求，但是我们外部资源并不是同时加载，浏览器会在资源被使用采取才去加载资源。由于加载图片需要一定时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况。

解决方法：通过将三张图片整合到一张图片上，这样就可以同时将三张图片一起加载，就不会出现闪烁问题，再用background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（css-sprite）。

整合技术优点：

将多个图片整合成一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。

将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验。

背景简写方式

background: red url() center center no-repeat fixed;

没有顺序要求，也没有数量要求，不写就代表默认值。

表格

通过border-spacing:0px属性来设置table与td边框之间距离。

通过border-collapse：collapse；来设置表格边框合并。

设置了边框合并，则border-spacing自动失效。

在一些情况下表格是非常长的，这时就需要将表格分为三个部分，表头，表格主体，表格底部。thead、tbody、tfoot来区分表格的不同部分，他们都是table的子标签，都需要直接写到table中，tr需要写到这些标签中，并且thead中内容永远会显示到表格头部，tbody中内容永远都会显示在表格的底部，tfoot中的内容永远都会显示在表格底部。

如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素，通过table > tr 无法选中进行，需要通过tbody > tr 来选择设置。

表格布局

表格的列数由td最多的决定，表格可以嵌套，可以在td中放置一个表格。

已经被淘汰，不易维护。

clearfix

子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。使用空的table标签可以隔离父元素的外边距，阻止外边距的重叠。

即可解决高度塌陷，又可确保父元素和子元素的垂直外边距不会重叠

表单

使用 <form> </form> 标签来创建一个表单

表单中必须要有两个属性 action和method，

action表示提交单到服务器中的地址 method 。

用户填写的消息会附在url地址的后边以查询字符串的形式发送给服务器url地址？查询字符串

格式：属性名=属性值

用户名<input type="text" name="username" value="admin">

密码<input type="password" name="password">

单选按钮：

性别<input type="radio" name="gender" value="man" />男

<input type="radio" name="gender" value="woman" />女

多选框：

<input type="checkbox" name="hobby" value="zq">足球

<input type="checkbox" name="hobby" value="ymq">羽毛球

<input type="checkbox" name="hobby" value="ppq">乒乓球

下拉列表：

</optgroup>

</optgroup>

</select>

如果希望在单选框中或多选框中指定默认选项，则可以在希望选中的项中添加checked="checked"属性。而在下拉列表option中添加selected="selected"来设置默认选中项。在select添加一个multiple="multiple",则下拉列表变成一个多选的下拉列表。

在select中可以使用optgroup对选项进行分组，可以通过lable属性来指定分组的名字。

<label for="id中的值">文字</label>用来设置点击文字就跳到该选项框中。

fieldset 、legend 、label

• fieldset 用来为表单项进行分组。

• legend 用于指定每组的名字。

• label 标签用来为表单项定义描述文字。

框架集

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集，而不使用内联框架。使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中，所以要使用框架集，页面中就不可以使用body标签。

属性：

rows：指定框架集中的所有的框架，一行一行的排列

cols：指定框架集中所有的页面，一列一列的排列

这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小。

franeset和iframe一样，它里边的内容都不会被搜索引擎所检索，所以如果使用框架集则意味着页面中不能有自己的内容，只能引入其他页面，而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求。

IE6中png修复

Picture format in IE6 png24, will lead to transparency effect not display properly

Solution:

You can use png8 instead png24, can solve the problem, but after using png8 instead png24, picture clarity will decline.

Use Javascript to solve the problem, the need to introduce an external Javascript file to the page and then write a simple JS code to deal with the problem.

There are some cases, there are some special code we just need to perform some special browsers, while other browsers do not need to perform, then you can use CSS Hack to solve the problem, actually refers to the CSS Hack a special code, which can only identify some browsers, the browser does not recognize the other, in this way, to set the special code for a number of browsers.

HACK conditions effective only for the IE browser, other browsers will recognize it as a comment, IE10 and above browser is no longer supported in this way.

<!--[if IE 6]>

.......

<![endif]-->

Attribute-level HACK

.body{

background-color:red;

<! - add an underscore in front of the style, the style and the only IE6 browser can identify ->

_background-color:yellow;

<! - add style * in front of a style, only to recognize in IE7 and below the browser ->

*background-color:blue;

}

Reproduced in: https: //www.jianshu.com/p/49bfbaf28863

Guess you like