css的尺寸、display的属性、以及浮动和清除浮动的方法
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的属性、以及浮动和清除浮动的方法的更多相关文章
- CSS基础 和 font字体、背景属性连写 与 清除浮动方法
1.伪类 1. :link 2. :visited 3. :hover(重要) 4. :active 5. :focus(input标签获取光标焦点) 2.伪元素 1.:first-letter 2. ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- css浮动与清除浮动
css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- [Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法
cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- 重温前端基础之-css浮动与清除浮动
文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...
- CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
- CSS浮动和清除浮动
1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局.只有一个标签设置了浮动float属性,就会变成块级标签. <!DOCTYPE html> < ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
随机推荐
- 2019 China Collegiate Programming Contest Qinhuangdao Onsite
传送门 D - Decimal 题意: 询问\(\frac{1}{n}\)是否为有限小数. 思路: 拆质因子,看是不是只包含2和5即可,否则除不尽. Code #include <bits/st ...
- JS高阶---对象创建模式(5种)
[前言] 函数高级部分先看到这里,接下里看下面向对象高级部分 .对象创建模式 .继承模式 [主体] (1)Object构造函数模式 案例如下: 测试结果如右图所示 (2)对象字面量形式创建 案例如下: ...
- java环境变量和查看安装路径
java环境变量和查看安装路径一:先说windows查看安装路径和版本吧: set java_home:查看JDK安装路径 java -version:查看JDK版本 linux下查看: wherei ...
- python27期day18:模块和包、作业。
1.模块和包: 我们今天来讲解一下模块和包,模块我们已经知道是什么东西了,我们现在来看看这个包是个什么? 我说的包可不是女同胞一看见就走不动的包,而是程序中一种组织文件的形式. 只要文件夹下含有__i ...
- 微信小程序 - 组件 | 自定义组件 | 组件事件传递页面
组件 小程序允许我们使用自定义组件的方式来构建页面 类似Vue的小组件 自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss, js 4个文件组成 1.创建 1.创建compon ...
- OpenStack产品摘要
docs OpenStack 核心服务 计算 Nova:虚拟化设施资源管理 ZUN:容器管理 QINLING:Serveless Function 裸金属 IRONIC:裸金属资源管理 CYBORDF ...
- stack栈、heap堆的说明图
上面的两幅图是stm32系列的,但是基本原理可以通用的.
- Linux--部署Django项目
简单部署 1.安装虚拟环境virtualenvwrapper,创建虚拟环境目录,进入虚拟环境,我的虚拟环境目录叫venv2 [root@HH ~]# workon venv2 (venv2) [roo ...
- 【day02】PHP
一.数据类型(8个主要数据类型和4个伪类型) 1.8个主要数据类型 (1)标量类型(存储单一值) a.整型(Integer Int) b.浮点型(Float Do ...
- cf1182D Complete Mirror
可以得到一个结论, 可行的点要么是直径端点, 要么是直径中点, 要么是直径中点引出的链中最短的端点 #include<cstdio> #include<algorithm> # ...