CSS3
梦颖飞燕
这个作者很懒,什么都没留下…
展开
-
CSS自适应布局总结
转载地址:http://blog.csdn.net/three_bird/article/details/51468817 所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。 大体上,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位三种定位机制,CSS3中的transform、弹性盒子模块、试验中的gri转载 2016-05-21 10:59:44 · 1229 阅读 · 0 评论 -
css最核心的几个概念
本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。 元素类型 HTML 的元素可以分为两种: 块级元素(block level element)内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一行(即无转载 2017-03-30 22:15:05 · 201 阅读 · 0 评论 -
CSS3--弹性盒模型flex
一、用途 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 二、flex设置 1.任何一个容器都可以指定为Flex布局。 eg: .box{display:flex}原创 2017-03-27 08:50:54 · 424 阅读 · 0 评论 -
三栏网页宽度自适应布局方法
圣杯布局和双飞翼布局解决的问题是一样的,就是两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。 但是圣杯布局和双飞翼布局在实现方式上有一点差别。 双飞翼布局 HTML片段如下: main left right 注意:主体main放置在最前面可以优先加载。mainln是为了处理main中内容的遮盖问题,只需设置它的左原创 2017-06-14 10:40:23 · 341 阅读 · 0 评论 -
页面布局:两列布局
定宽与自适应 浮动 float + margin left right right --css--> .left { float: left; width: 100px; } .right { margin-left: 120px; }简单的布局方法,左侧设置浮动,右侧设置margin-left(避免环绕左侧)的布局方法优点:容易理解转载 2017-10-23 21:44:15 · 2458 阅读 · 0 评论 -
CSS垂直居中的11种实现方式
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其它非主流浏览器。 11种实现方式分别如下: 1. 使用绝对定位和负外边距对块级元素进行垂直居中 html代码: div id="box"> div id="child">我是测试DIVdiv> div> css代码: #box { width: 300px;转载 2017-12-14 21:20:37 · 270 阅读 · 0 评论