css的元素表现
块级元素和行内元素的表现:
块级元素:块级元素和父元素的宽度一致,默认情况下就是和body的宽度一样,也可以说和浏览器窗口的宽度一致,致使同一行不能再放下另外的元素,所以块级元素表现为独占一行。
块级元素可以设置宽高。
行内元素:行内元素不能设置宽高,它的宽度是由内容撑开的。但是当将元素设置为块级元素之后就可以设置宽高了。
特别说明:
当给元素添加position:absolute或者设置float的时候,就可以设置宽高了。这是因为:position和float会隐式的改变display类型,不论之前是什么类型的元素,只要设置了上面两个中的任意一个,都会让元素以display:block的方式显示,并获取block的一些特性:可以设置宽高,但是默认宽度并不占满父元素。
那么这里引申一些display、position和float之间关系的内容:
浏览器会为每个html元素生成矩形盒子,矩形盒子按照可见版式模型在页面上排布,可见的页面版式主要有position、display、float三个属性控制:
position属性控制页面上元素之间的位置关系
display属性控制元素是堆叠、并排还是根本不在页面上出现
float属性提供控制的方式,以便把元素组成多栏布局
他们之间的关系如下:
- 如果'display'值为'none',那么'position'和'float'不会生效。此时,元素不生成盒子
- 否则,如果'position'值为'absolute'或者'fixed',盒是绝对定位的,并且'float'的计算值为'none'。那么display就根据下表来设置,盒的位置将由'top','right','bottom'和'left'属性和盒的包含块决定
- 否则,如果'float'值不为'none',那么盒是浮动的,'display'根据下表来设置
- 否则,如果该元素是根元素,'display'根据下表来设置,但指定值'list-item'应该变成计算值'block'还是'list-item',在CSS 2.1中是未定义的
- 否则,其它'display'属性值(计算值)就用指定值
css的元素表现的更多相关文章
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- CSS块元素与内联元素(转)
为什么<a><span>这种标签定义width,height等CSS属性时会发现完全不生效? 因为它们不是容器,它们是内联元素,不是块元素 CSS 块元素与内联元素 关键字: ...
- Selenium3自动化测试【20】CSS定位元素
CSS 指层叠样式表 (CascadingStyleSheets),CSS一种用来表现HTML或XML等文件样式的计算机语言,其能够灵活的为页面提供丰富样式的风格. CSS使用选择器为页面元素绑定属性 ...
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- jQuery如何改变css伪元素样式
首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...
- css 伪元素分享!!!
最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS隐藏元素的几种方法
使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...
- CSS 子元素选择器与后代选择器区别实例讲解
css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...
随机推荐
- Python 去除列表中重复的元素
Python 去除列表中重复的元素 来自比较容易记忆的是用内置的set l1 = ['b','c','d','b','c','a','a'] l2 = list(set(l1)) print l2 还 ...
- Redis偶发连接失败案例分析
[作者] 张延俊:携程技术保障中心资深DBA,对数据库架构和疑难问题分析排查有浓厚的兴趣. 寿向晨:携程技术保障中心高级DBA,主要负责携程Redis及DB的运维工作,在自动化运维,流程化及监控排障等 ...
- ubuntu sudo: pip:找不到命令
编辑文件 /etc/sudoers sudo vi /etc/sudoers 将Defaults env_reset ,改为 Defaults !env_reset 编辑文件-/.bashers ...
- js获取url地址的参数的方法
js获取url参数值 今天说一下如何获取url参数值. 思路 通过location的search就可以获取到url中问号后面的值. 字符串过滤到问号 通过split方法分割参数集合 循环赋值 匹配对应 ...
- Install MySql on CentOS
Installing & Configuring MySQL Server This Howto will show you how to install MySQL 5.x, start t ...
- 用expect解决批量Linux集群机器间SSH免密码访问
转自:http://blog.csdn.net/aichaoguy/article/details/11693269#!/bin/bash #check whether package 'expect ...
- 《LeetBook》leetcode题解(16):3Sum Closest [M]
我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
- 冒泡排序——Bubble Sort
基本思想:两个数比较大小,较大的数下沉,较小的数冒起来. 过程: 1.比较相邻的两个数据,如果第二个数小,就交换位置. 2.从后向前两两比较,一直到比较最前两个数据.最终最小数被交换到起始的位置,这样 ...
- Centos 添加用户和用户组
groupadd cheat useradd -g cheat cheat passwd cheat 密码设置jsb_6041
- window.history的跳转实质-HTML5 history API 解析
在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? ...