前段基础css(2)

 

一、标准文档流

宏观的将,我们的web页面和ps等设计软件有本质的区别,web网页的制作,是个“流”,从上而下,像 “织毛衣”。而设计软件 ,想往哪里画东西,就去哪里画。

标准文档流下,有一些现象,比如空白折叠现象、高矮不齐底边对齐现象等。

标准文档流等级森严,标签分为两种等级:行内元素和块级元素。

1、行内元素和块级元素的区别:

行内元素:

    a、与其他行内元素并排;

    b、不能设置宽、高,默认的宽度,就是文字的宽度;

块级元素:

    a、独占一行,不能与其他任何元素并列;

    b、能接受宽、高。如果不设置宽度,那么宽度将默认变为父级的100%;

2、标签的分类

在以前的HTML知识中,我们已经将标签分过类,当时分为了:文本级、容器级。

a、从HTML的角度来讲,标签分为:

    文本级标签:p、span、a、b、i、u、em;

    容器级标签:div、h系列、li、dt、dd;

         PS:为甚么说p是文本级标签呢?因为p里面只能放文字&图片&表单元素,p里面不能放h系列和ul,p里面也不能放p。

  b、现在,从CSS的角度讲,CSS的分类和上面的很像,就p不一样:

    行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级,但是是个块级元素;

    块级元素:所有的容器级标签都是块级元素,还有p标签;

3、块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

a、块级元素转换为行内元素,通过设置:display: inline;

b、行内元素转换为块级元素,通过设置:display: block;

4、脱离标准流

标准流里面的限制非常多,导致很多页面效果无法实现,如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:移民!脱离标准流!

  css中一共有三种手段,使一个元素脱离标准文档流:

    (1)浮动

    (2)绝对定位

    (3)固定定位

二、浮动

浮动是css里面布局最多的一个属性,也是很重要的一个属性。float:表示浮动的意思,有如下属性值:

    none: 表示不浮动,默认;

    left: 表示左浮动;

    right:表示右浮动;

那么浮动如果大家想学好,一定要知道它的四大特性:

    (1)浮动的元素脱标(就是脱离了标准文档流),标签一旦设置浮动,就能够并排,并且不区分行内、块状元素,也就能够设置宽高;

    (2)浮动的元素互相贴靠;

    (3)浮动的元素由"字围"效果;

    (4)收缩的效果(即一个浮动元素,如果没有设置width,那么就自动收缩为文字的宽度(这点跟行内元素很像));

注意:关于浮动,我们初期一定要遵循一个原则,永远不是一个盒子单独浮动,要浮动就一起浮动,另外,有浮动,一定要清除浮动。

三、清除浮动

先来看如下两段html和css代码:

html代码:

<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>

  css代码:

.father{
width: 1126px;
}
.box1{
width: 200px;
height: 500px;
float: left;
background-color: red;
}
.box2{
width: 300px;
height: 200px;
float: left;
background-color: green;
}
.box3{
width: 400px;
float: left;
height: 100px;
background-color: blue;
}
.father2{
width: 1126px;
height: 600px;
background-color: purple;
}

效果发现:如果不给父盒子一个高度,那么浮动子元素是不会填充父盒子的高度,那么此时.father2的盒子就会跑到第一个位置上,影响页面布局。

  那么我们知道,浮动元素确实能实现我们页面元素并排的效果,这是它的好处,同时它还带来了页面布局极大的错乱!!!所以我们要清除浮动。

  我们有多种清除浮动的方法,在这里给介绍四种:

    a、给父盒子设置高度;

    b、内墙法(给浮动元素的后面加一个空的块级标签,再给该标签设置clear:both属性);

    c、伪元素清除法(常用);

    d、overflow:hidden(常用);

应用:伪元素清除浮动的写法如下:

给浮动元素的父盒子,也就是不浮动的元素,添加一个clearfix类,然后作如下设置:

.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden

}

关于overflow:

overflow属性规定当内容溢出元素框时发生的事情。

描述

visible

默认值,内容不会被修剪,会呈现在元素框之外

hidden

内容会被修剪,超出元素框之外的部分不可见

scroll

不管内容是否超出元素框都出现滚动条

auto

如果内容超出元素框,则浏览器会显示滚动条以便查看其余内容

inherit

规定继承父元素的overflow属性的值

逐渐演变成overflow:hidden清除法,

  其实它是一个BFC区域:具体参见:https://blog.csdn.net/riddle1981/article/details/52126522

四、margin中的坑

1、margin塌陷问题

当给两个标准流下的兄弟盒子设置垂直方向上的margin时,那么以较大的为准,那么我们称这种现象为塌陷。记住这种现象,在布局垂直方向盒子的时候要注意margin的用法。水平方向上没有塌陷现象。

  当我们给两个标准流下的兄弟盒子设置浮动之后,就不会出现margin塌陷的问题。

2、margin:0 auto;

  当一个div元素设置margin:0 auto;时就会使盒子居中,我们知道margin:0 auto;表示上下外边距离为0,左右为auto的距离,那么auto是什么意思呢?若设置margin-left:auto;我们发现盒子尽可能大的右边有很大的距离,没有什么意义。若设置margin-right:auto;我们发现盒子尽可能大的左边有很大的距离,当两条语句并存的时候,我们发现盒子尽可能大的左右两边有很大的距离,此时我们发现盒子就居中了。

  注意:

    (1)使用margin: 0 auto;时,水平居中盒子必须有width,要有明确width值;

    (2)如果给盒子设置浮动、或者固定定位、或者绝对定位,那么margin: 0 auto;失效;

    (3) margin:0 auto;使盒子居中,而不是居中文本,文字水平居中使用text-align: center;

3、善于使用父级的padding,而不是margin

  另外我们一定要知道margin属性是描述兄弟盒子的关系,而padding描述的是父子盒子的关系。

  先看如下两段代码:

  css代码:

.father{
width:300px;
height:300px;
background-color:blue;
}
.son{
width:100px;
height:100px;
background-color:orange;
margin-top:30px;
}

  html代码:

    <div class=”father”>
<div class=”son”></div>
</div>

  运行上面代码发现两个盒子整体下移了30px,其实我们是想让子盒子下移30px,父盒子不要动,但是因为父盒子没有设置border,所以父盒子也掉下来了,一旦给父亲设一个border就好了,那么问题来了,我们不可能在页面中无缘无故的去给盒子加一个border,所以此时的解决方法只有一种,就是使用父盒子的padding,让子盒子向下走。

五、字体图标的使用

  阿里巴巴的矢量图标库:http://www.iconfont.cn/

前端CSS(2)的更多相关文章

  1. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

  2. 扯一扯前端css的整体架构设计:(2)base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  3. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  4. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  5. 前端 CSS 目录

    前端 CSS 介绍 前端 CSS语法 前端 CSS 注释

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  8. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

  9. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

  10. 前端——CSS选择器

    目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...

随机推荐

  1. ubuntu关闭cups服务

    本人使用的ubuntu10.10每次开机时使用nmap扫描127.0.0.1的时候总是能发现一个631端口开启,在/etc/services找到 631端口是网络打印机服务,但对于我一个普通用户来说这 ...

  2. 「UVA11181」 Probability|Given(概率

    题意翻译 有n个人要去买东西,他们去买东西的概率为p[i]. 现在得知有r个人买了东西,在这种条件下,求每个人买东西的概率. 感谢@s_r_f 提供翻译 题目描述 PDF 输入输出格式 输入格式: 输 ...

  3. ACM学习历程—Hihocoder编程之美测试赛B题 大神与三位小伙伴(组合数学 )

    时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给你一个m x n (1 <= m, n <= 100)的矩阵A (0<=aij<=10000),要 ...

  4. ACM学习历程—ZOJ3471 Most Powerful(dp && 状态压缩 && 记忆化搜索 && 位运算)

    Description Recently, researchers on Mars have discovered N powerful atoms. All of them are differen ...

  5. codevs2821 天使之城

    传送门 2821 天使之城  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 天使城有一个火车站,每辆火车都从A方向驶入车站 ...

  6. MySQL5.6中新增特性、不推荐使用的功能以及废弃的功能

    虽然已经使用MySQL5.6版本有一段时间了,但由于没有和之前的版本作过详细比较,所以对于哪些重要的或者不太重要的特性是在新版本中引入的,还有哪些特性已经或者将要从旧版本中移除的并没有一个十分全面的了 ...

  7. BZOJ2028:[SHOI2009]会场预约(线段树版)

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.lydsy.com/JudgeOnline/prob ...

  8. Poj_1011_Sticks(剪枝)

    一.Description 乔治拿来一组等长的木棒,将它们随机地砍断,使得每一节木棍的长度都不超过50个长度单位.然后他又想把这些木棍恢复到为裁截前的状态,但忘记了初始时有多少木棒以及木棒的初始长度. ...

  9. Code:获取指定汉字的首字母

    ylbtech-Code:获取指定汉字的首字母 1.获取指定汉字的首字母返回顶部 1. /// <summary> /// 获取指定汉字的首字母 /// </summary> ...

  10. win7 64位搭建Mantis 缺陷管理系统(2)

    建立Bug数据库 1. 右键Windows托盘的图标,选择“Local Web”,(或者在IE地址中输入“http://127.0.0.1/”)可看到如下页面: 2. 点击选择“mantis”,进入页 ...