练习

1.网易考拉下拉菜单 2.爱奇艺新闻 3.ps滤镜菜单 4.爱奇艺列表

7 布局

7.1 盒子模型

网页设计，首先要做好整体的布局，网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置，因此会经常用到一些内容、填充、边框、边界等属性，html布局元素经过不同的嵌套与位置的摆放，就类似于日常生活中的用盒子装东西，把每一个布局元素看成一个盒子，引出了盒子模型

元素框的最内部分是实际的内容，直接包围内容的是内边距（padding）内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。 在 CSS 中，width 和 height 指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

7.1.1 margin

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 有四个值的时候：margin:10px 5px 15px 20px;（顺序依次是 上 右 下 左）； 有三个值的时候：margin:10px 5px 15px; （顺序依次是 上 左右 下）； 有两个值的时候：margin:10px 5px; （顺序依次是 上下 左右） 有一个值的时候 margin：10px；（代表四个值都是10px）

#div1{

    margin:10px;/*代表四个值都是10px*/

}

#div2{

    margin:10px 5px; /*顺序依次是 上下 左右*/

}

#div3{

    margin:10px 5px 15px;/*顺序依次是 上 左右 下*/

}

#div4{

    margin:10px 5px 15px 20px;/*顺序依次是 上 右 下 左*/

}

7.1.2 padding

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。 padding 简写时值的顺序与margin相同

块级元素：块级元素独占一行，每次都从新行上开始，宽度，行高以及外边距和内边距都是可以设置的，如果宽度省略的话，默认充满整个容器，并且可以容纳其他行内元素，支持所有的css属性 行内元素：在一行内显示，不单独占行，不可以设置宽高，宽高被内容撑开，不支持上下margin，代码换行被解析 块级元素行内元素区别？ 为什么img input 行内标签 但是可以设置宽和高？ 替换元素：根据元素的属性来显示样式 img input select 不可替换元素：根据原来预设好功能来显示 strong b 块级元素和行内元素转换

display:block   /*行内元素转换成块级元素 独占一行*/

display:inline   /*块级元素转换成行内元素*/

display:inline-block;  /*行内元素转换成 行内块可以支持宽高.*/

练习：

1、螺钉课堂导航 2、百度百家导航 3、京东爱逛导航 4、京东电子数据导航 5、爱奇艺导航

7.2 浮动

普通流：指的是在不使用其他的与排列和定位相关的特殊css规则时，各种元素的自然排列规则

浮动：脱离标准文档流并且可以左右移动

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

浮动的作用：可以很方便的布局 例如： 两个div左右布局 在一行内显示

浮动带来的问题

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

             .wrap{

                 border: 4px solid red;

             }

             .left{

                 width: 300px;

                 height: 200px;

                 float: left;

                 background-color: #ccc;

             }

             .right{

                 width: 500px;

                 height: 200px;

                 float: right;

                 background-color: #FFA500;

                 margin-left: 5px;

             }

             .footer{

                 height: 100px;

                 background-color: black;

             }

        </style>

    </head>

    <body>

        <div class="wrap" >

            <div class="left"></div>

            <div class="right"></div>

        </div>

        <div class="footer"></div>

    </body>

</html>

解决浮动带来问题的方法：

父盒子设置高度

.wrap{

      border: 4px solid red;

      height: 200px;

}

添加额外标签 用clear：both

<div class="wrap" >

   <div class="left"></div>

   <div class="right"></div>

   <div style="clear: both;"></div>

</div>

使用br标签和它的属性

<div class="wrap" >

      <div class="left"></div>

      <div class="right"></div>

      <br clear="both" />

</div>

父元素设置overflow:hidden

.wrap{

    border: 4px solid red;

    overflow: hidden;

    zoom: 1;

}

使用:after伪元素

.clearfix{

   *zoom: 1;

}

.clearfix:after{

      content:".";

      display:block;

      height:0;

      visibility:hidden;

      clear:both;

}

BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗的讲，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，外面的元素也不会影响到里面的元素,同时BFC任然属于文档中的普通流。

生成BFC的元素

根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

BFC布局规则：

1、内部的Box会在垂直方向，一个接一个地放置。

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的

格式化，否则相反)。即使存在浮动也是如此。

4、BFC的区域不会与float box重叠。

5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之

也如此。

6、计算BFC的高度时，浮动元素也参与计算

haslayout

haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，使用布局概念来控制元素的尺寸和定位。从表现上来说，hasLayout 可以等同于 BFC。 触发hasLayout的条件：

position: absolute

float: left|right

display: inline-block

width: 除 “auto” 外的任意值

height: 除 “auto” 外的任意值 （例如很多人闭合浮动会用到 height: 1%  ）

zoom: 除 “normal” 外的任意值 

在 IE7 中，overflow 也变成了一个 layout 触发器：

overflow: hidden|scroll|auto (这个属性在IE之前版本中没有触发 layout 的功能。)

overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的属性，尚未得到浏览器的

广泛支持。他们在之前IE版本中同样没有触发 layout 的功能）

兼容方法

1 使元素即生成了 block formatting context，又触发了 hasLayout

    1.1 对于触发 hasLayout 的元素，通过 CSS 设置，使它产生 block

 formatting context；

    1.2 生成 block formatting context 但是没有触发 hasLayout 的元素，

通过设置 'zoom:1'，使其触发 hasLayout。

1 使元素即没有触发 hasLayout，又没有创建 block formatting context。

螺钉课堂视频课程地址：http://edu.nodeing.com

html+css快速入门教程（4）的更多相关文章

  1. html+css快速入门教程（5）

    练习: 1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c 7.3 定位 通过使用 position 属性,我们可以选择 3 种不同类型的定位,这会影响元素框生成的方式. ...

  2. html+css快速入门教程（3）

    练习: 1.画盒子 2.相框 5 基础选择器 5.1 id选择器 ID选择器与类选择器的定义与引用方式类似,只是定义的符号不一样.ID通常表示唯一值,因此,ID选择器在CSS 中通常只出现一次.如果出 ...

  3. html+css快速入门教程（2）

    3 标签 3.1 div div 标签表示一个区块或者区域,你可以把它看成是一个容器,比如说一个 竹篮 作用:用来把网页分块 并且里面可以装任意的html元素 <div>这里是一个div容 ...

  4. html+css快速入门教程（6）

    9 综合实例 仿百度云盘下载页面实战 10 表格 10.1 table table 为表格标签 可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td tr表示一行 td表示 ...

  5. html+css快速入门教程（1）

    1 HTML简介 1.1. 什么是HTML?(了解) HTML是超文本标记语言(HyperText Markup Language,HTML)的缩写.是标准通用标记语言(SGML Standard G ...

  6. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  7. 专为设计师而写的GitHub快速入门教程

    专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li     原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...

  8. EntityFramework6 快速入门教程

    EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...

  9. Apple Watch开发快速入门教程

     Apple Watch开发快速入门教程  试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...

随机推荐

  1. 重学 Java 设计模式：实战适配器模式

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 擦屁屁纸80%的面积都是保护手的! 工作到3年左右很大一部分程序员都想提升自己的技术 ...

  2. 实现一个 $attr(name,value) 遍历；属性为 name 值为 value 的元素集合

    <body> <div class="box clearfix"></div> <div name="zs">& ...

  3. Java 蓝桥杯 算法训练 字符串的展开 （JAVA语言实现)

    ** 算法训练 字符串的展开 ** 题目: 在初赛普及组的"阅读程序写结果"的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中,含有类似于"d-h" ...

  4. Java实现 蓝桥杯 算法训练 Airport Configuration

    试题 算法训练 Airport Configuration 问题描述 ACM机场是一个本地机场,对于大多数人来说,机场不是他们的终点或起点,而是中转站.机场有一个规划图.到达的大门在机场的北边(相当于 ...

  5. Java实现 LeetCode 167 两数之和 II - 输入有序数组

    167. 两数之和 II - 输入有序数组 给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index1 必 ...

  6. Java实现 蓝桥杯VIP 算法提高 能量项链

    算法提高 能量项链 时间限制:1.0s 内存限制:256.0MB 问题描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记 ...

  7. Java实现 LeetCode 87 扰乱字符串

    87. 扰乱字符串 给定一个字符串 s1,我们可以把它递归地分割成两个非空子字符串,从而将其表示为二叉树. 下图是字符串 s1 = "great" 的一种可能的表示形式. grea ...

  8. Java线程变量问题-ThreadLocal

    关于Java线程问题,在博客上看到一篇文章挺好的: https://blog.csdn.net/w172087242/article/details/83375022#23_ThreadLocal_1 ...

  9. Water Testing【皮克定理，多边形面积，线段上点的数目】

    Water Testing 传送门:链接  来源:UPC 9656 题目描述 You just bought a large piece of agricultural land, but you n ...

  10. 链式前向星存树图和遍历它的两种方法【dfs、bfs】

    目录 一.链式前向星存图 二.两种遍历方法 一.链式前向星存图:(n个点,n-1条边) 链式前向星把上面的树图存下来,输入: 9 ///代表要存进去n个点 1 2 ///下面是n-1条边,每条边连接两 ...