谈谈CSS的布局，display、position、float

【谈谈CSS的布局，display、position、float】的更多相关文章

谈谈CSS的布局，display、position、float

前言前端一直是我的一个很大的缺憾,这段时间痛顶思痛,决定好好的把前台的东西加强,这不,在学习了一段时间js之后,在做一些小练习,却发现最基本的一些css知识却还不了解,所以便有了这篇博文. 块级元素与行内元素首先谈谈人们经常提及的块级元素和行级(内联)元素 p, ul, form, div等元素被称为块级元素,这些元素显示为一块儿内容(会自动换行),span, input 等元素称为行内元素,这两者主要区别就是块级元素会从上到下一个个垂直排列,每个自占一行,如下即使两个div之间没任何元素,…

css样式布局中position的那些事儿

哎,页面布局及设计开发.对于一个一直从事后台开发来说屌丝来说,确实是件非常费时.费力,非常艰难的一件事. 今晚是想实现把多张重叠在一起.或是标记一张图片中不同的位置然后赋以超链接.花了一晚上的时间,才算初步搞定,大致明确了下面几个css属性使用方法. [1]将标签设置为float.和同事讨论: html的标签有块级和行级(至于那些是块级,可百度之),每一个块级会占用html文档的一行(之所以是一行,是由于块级后面会带有换行).假设把块级标签设置为float时.则标签:(1)脱离原来父级标签. (…

【CSS】布局之浮动float和绝对定位absolute的选择

浮动float: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.(W3C) 绝对定位absolute: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框.(W3C) 以上是W3C里对浮动和绝…

css代码思考:display和float

关于display <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style media="screen"> .num1{ display: inline; } .num2{ display: inline; } </style&…

布局display

什么是布局: 浏览器以正确的大小将元素摆放在正确的位置上. 布局:元素摆放的模式. 影响元素大小和位置的css属性: display position float flex display 设置元素的显示方式 ,包括大小和位置 , display的取值有: block inline inline-block none display : block block元素又称为『块级元素』特性: 1 .默认宽度为父元素宽度 2. 可以设置宽高 3. 换行显示( 前序元素相对于 displa…

CSS弹性盒布局(display:flex)

CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/5856c4ae91f2 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html https://www.cnblogs.com/xuyuntao/articles/6391728.html 主要内容: 父级: display:flex; (…