Mawawa CSS 学习之旅 Display】的更多相关文章

CSS 类型之 Display 更新时间: 2018-2-10: 一个良好的布局结构从 display 开始! 分类:外部值.内部值.列表值.属性值.混合值.显示值.全局值: 一.外部值 作用:主要用于容器的外部表现:因此对内部子元素不会有影响. 属性值:block,inline: 说明: block 块,独占一行.inline 内联,在同一行显示.这没啥好说的! 二.内部值 作用:主要作用于内部表现:对外部无影响: 属性值: flow-root 该种模式内如果遇见子元素为float类型,那么父…
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级元素容器可以容纳多个嵌套的块级标签或者行内标签.常见的块元素有<h1>~<h6>.<p>.<div>.<ul>.<ol>.<li>等,其中<div>标记是网页制作中最常用的块元素. 行内元素 行内元素不占有独立的区…
目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和block 2. inline-block属性值 3. table-cell属性值 4. none属性值 参考资料:https://www.bilibili.com/video/BV18J411S7tZ?p=5 一.display属性概述 根据CSS规范的规定,每一个网页元素都有一个display属性…
主要内容: 盒子模型内边距,外边距,边框,外边距合并 主要包括:margin(外边距)padding(内边距) border(边框)centent(内容) 内边距:padding,paddingleft,paddingright,paddingtop,paddingbottom 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <…
color:颜色derction:方向:line-height:行高:letter-spaceing:字符间距:text-align:对齐方向:text-decoration:装饰:text-indent:锁紧文本中首行:text-transform:元素中的字母:unicode-bidi:设置文本方向:white-spacing:元素中空白的处理方式:word-spacing:字间距 代码实例: p{ color:red; text-align: center; } h6{ text-inde…
css背景 属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:background-repeat:norepeat,repreat,laft,right 代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">…
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法外,还有没有其他方法可以实现这种效果呢,答案是肯定的,那就是下面要介绍的CSS的浮动特性,浮动从字面意思上来看,就是浮起来,动起来,那么是谁浮起来,又是谁动起来呢?往下看,很快就会知道答案了. 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,漂浮在标准流之上.元素浮动后,虽然脱离标准流,但…
设置display:inline-block;后的元素 就是一个格式化为行内元素的块容器( Block container ):通俗讲就是:将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 支持的浏览器:目前有 safri 和 chorme 及 ie8+ 和 firefox3.6+:ie6和ie7不支持该属性: 解决办法: IE6/IE7的inline-block属性只对原生默认的内联元素(span, a, em......)有效,对于块级元素(d…
css重构之旅 >前言: 今年我大一,马上就要大二了.从高三毕业暑假到大学的这一年马上过去,马上迎来大二生活学习前端也有将近一年了.一昧去追求那些视觉的效果和相对高端和新颖的技术,反而忽略了最基础的布局技巧. 回味 2017年3月,百格教育的手机端网站,是我接到的第一个公司外包的项目.我和组长合作完成,现在项目也已经顺利完成,回想起来,自己也跟着组长学到了不少:1)一个公告的列表(你应该提前考虑到,一则公告的字数一定有多有少的)多出的应该做处理,不然超出会排成两行,使布局陷入混沌的状态: tov…
前言:之前写了二篇YII2.0的基本mvc操作,所以,打算laravel也来这一下 *安装现在一般都用composer安装,这里就不讲述了* 一.熟悉laravel (1)如果看到下面这个页面,就说明你已经安装好框架了 (2)认识一下目录结构 二.mvc操作 *每次增加一个控制器与方法,都要增加路由* \routes\web.php Route::get('/', function () { return view('welcome'); }); Route::get('/test', 'Tes…