css的尺寸
width height
line-height 行高是由三部分构成,上间距 文本高度 下间距,且上下间距相等。所以文字居中。
行高:一旦设置了行高,元素内部必须有内容。
line-height:3;行高是当前数字x当前字体大小就是行高的值。
Display
这个属性规定元素以某种形式显示
display:none;当前元素不显示,不占用当前的空间了
visibility:hidden;当前元素隐藏,还占用当前的空间。
display:block;当前元素以块级元素的形式显示出来,往往可以将行级元素转换成块级元素。
display:inline;当前元素以行级元素的形式显示出来,往往可以将块级元素转换成行级元素。
display:inline-block;当前元素以行级块显示出来,即不占用一行,也可以设置宽高。

Float
浮动 属性值有left/right
1、浮动的元素脱离文档流了
2、浮动的元素相互贴靠(流氏布局)
浮动的元素会紧紧贴靠在一起如果后面的窗口空间够这个浮动元素的宽,他会挨着前一个元素贴靠,如果窗口空间不够他的宽,他会去找前一个元素贴靠,如果还不够继续往前找,不会越级去贴靠,这种排列方式叫流氏布局。
3、浮动元素有文字环绕效果
用在图文结合上。
清除浮动
浮动元素脱离了文档流,不在占用文档空间,导致后面的元素会去紧跟着上一个元素的位置进行排列,我们清除浮动的目的就是杜绝这种现象的发生。
1、给父元素设置高度;
2、给最后一个浮动元素后面加一个空元素,设置属性 clear:both;
3、给浮动元素的父级设置一个类 叫 clearfix
.clearfix:after{
clear:both;
height:0:
visiblity:hidden;
content:"";
display:block;
}

css的尺寸、display的属性、以及浮动和清除浮动的方法的更多相关文章

  1. CSS基础 和 font字体、背景属性连写 与 清除浮动方法

    1.伪类 1. :link 2. :visited 3. :hover(重要) 4. :active 5. :focus(input标签获取光标焦点) 2.伪元素 1.:first-letter 2. ...

  2. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

  3. css浮动与清除浮动

    css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...

  4. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  5. [Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  6. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  7. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  8. CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  9. CSS浮动和清除浮动

    1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局.只有一个标签设置了浮动float属性,就会变成块级标签. <!DOCTYPE html> < ...

  10. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

随机推荐

  1. 初识V4L2(一)

    V4L2驱动框架概述 V4L2(video for linux two)是linux为视频设备提供的一套标准接口.它也属于字符设备驱动程序. 首先回顾普通字符设备驱动程序的写法: app :      ...

  2. tar命令-解压和压缩文件

    tar命令 可以用来压缩打包单文件.多个文件.单个目录.多个目录. Linux打包命令_tar tar命令可以用来压缩打包单文件.多个文件.单个目录.多个目录. 常用格式: 单个文件压缩打包 tar ...

  3. 201871010118-唐敬博《面向对象程序设计(java)》第十周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  4. USACO Score Inflation

    洛谷 P2722 总分 Score Inflation https://www.luogu.org/problem/P2722 JDOJ 1697: Score Inflation https://n ...

  5. 第五周周二练习:实验 5 Spark SQL 编程初级实践

    1.题目: 源码: import java.util.Properties import org.apache.spark.sql.types._ import org.apache.spark.sq ...

  6. Arduino SPI驱动7引脚0.96寸OLED SSD1306 调试笔记

    https://www.geek-workshop.com/thread-37818-1-1.html 2.下载最新库https://learn.adafruit.com/monoc ... ibra ...

  7. 数据结构——链队列(linked queue)

    /* linkedQueue.c */ /* 链队列 */ #include <stdio.h> #include <stdlib.h> #include <stdboo ...

  8. 原生js-input框全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. hzoi欢乐时刻(持续更新)

    %%NC哥 %%Dybala %%cbx吐露(bei ji can)真相 %%skyh×2 不愿透露姓名的群众无意间发现惊人秘密, skyh默默坦白真相, 这究竟是人性的沦丧还是道德的泯灭? %%kx ...

  10. 分析并解决Linux发行版的自带OpenJdk和自己安装的OracleJdk新旧版本冲突问题

    解决办法: 从Oraclejdk 目录里可执行文件链接都复制到自己的LINK目录,然后IDE使用LINK变量下的命令 本文没有具体解决方法,只有探索思路........................ ...