CSS常用布局整理（二）

1-2-1单列变宽布局 side列定宽300px,content列变宽,尺寸是100%-300px.核心的问题就是浮动列的宽度应该等于“100% - 300px”,而CSS显然不支持这种带有减法运算的宽度表达方法.但是通过margin可以变通的实现这个宽度.实现的原理为,在content外面再套一个div,即图中的contentWrap,使它的宽度为100%,也就是等于container的宽度.然后通过将其margin-left设置为-300px,就使它向左平移了300px.再将content的…

CSS常用布局整理

固定宽度布局 1-2-1布局(浮动) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定宽度-float</title> <style type="text/css"> #header,#footer,#container{ width: 760px; margin: 0 auto; } #content { float: left; w…

CSS3 Flex布局整理(二)-容器属性

一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义了水平方向的对齐方式 3.align-content:定义了多个轴线的对齐方式.如果只有一根不起作用 4.align-items:项目只有一行的时候,来定义垂直方向的对齐方式二.flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为…

你不知道的css各类布局（二）之流体布局、液体布局、栅格布局

流体布局什么是流在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局概念流体布局(Liquid/Fluid Layout)指的是利用元素“流”的特性实现的各类布局,流式布局采用了相对长度单位(%.em.rem.vm.vh).典型的流式布局是采用百分比(%)作为主要区块的单位, 当然其他的相对单位(em)也是同样适用布局特点 ** 因为“流”本身具有自适应特性,所以流体布局往往都是具有自适应特性的,但是流体布局并不等同于自适应布局…

CSS常用布局实现方法

CSS 布局对我来说,既熟悉又陌生.我既能实现它,又没有很好的了解它.所以想总结一下,梳理一下 CSS 中常用的一列,两列,三列布局等的实现方法.本文小白,仅供参考.但也要了解下浮动,定位等. 一.一列布局 1. 居中定宽这算是最简单且最容易实现的布局了吧.列出最核心的 CSS 代码: body{text-align: center;font-size: 2em;} .head,.main,.footer{width: 960px;margin: 0 auto;} .main{backgro…

css常用布局

1.一列布局 html: <div class="header"></div> <div class="body"></div> <div class="footer"></div> css: .header{ height: 100px; background: pink; } .body{ height:500px; background: blue; } .footer…

css 常用布局

「前端那些事儿」③ CSS 布局方案我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案话不多说,上代码! 居中布局以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a) inline-block + text-align .parent{ text-align: center; } .child{ display: inline-block; } 复制代码 tips:此方案兼容性较好,可兼容至IE8,对于IE567并不支持inline-block,需要使用css…

CSS常用样式（二）

一.边框样式 1.border:复合属性.设置对象边框的特性. 取值: border-width: 设置或检索对象边框宽度. border-style: 设置或检索对象边框样式. border-color: 设置或检索对象边框颜色. #border4 { width: 100px; height: 100px; border:1px solid #FF0000; } <div id="border4"></div> 2.border-width:设置对象的边…

[div+css]网站布局实例二

重点: 合理应用"xhtml标签"建立良好的页面结构拿到一份"设计方案"的效果图后不要立即开始编码,而是要首先理清"各元素之间的关系"; 然后思考"以什么标签来组织所需表现的内容". ** 分析页面的基本构成,主要分成5区域: 上部LOGO; 导航菜单; 左侧边栏; 右侧内容; 底部版权区. ** 布局规划: 上部LOGO + 导航菜单 => 头部元素 =>置于header层; 左侧边栏sidebar+右侧边栏…

HTML/CSS 常用单词整理

页面布局(layout) header 头部/页眉: index 首页/索引: logo 标志: nav/sub_nav 导航/子导航: banner 横幅广告: main/content 主体/内容: container/con 容器: wrapper/wrap 包裹(类似于container): menu 菜单: sub_menu/second_menu 子菜单/二级菜单: list 列表: section 分区/分块(类似于div); article 文章: aside 侧边栏/广告: f…

CSS常用布局方式-两列布局、三列布局

CSS基础 2.几种布局方式1)table布局当年主流的布局方式,第一种是通过table tr td布局示例: <style type="text/css"> table{ width: 800px; height: 300px; border-collapse: collapse; } .left{ background-color: red; } .right{ background-color: blue; } </style> <body>…

HTML+CSS学习笔记整理二

盒子模型CSS(重点) 边框border 边框通常使用连写border:1px(边框大小) solid(实线或其他) red(颜色) border-collapse:collapse (合并边框) 内边距padding padding:10px 上下左右都为10 padding:10px 20px 上下为10px 左右为20px padding:10 20 30 上10 左右 20 下为30 padding:上右下左 padding.border会撑开具有 width…

html+css 常用布局

1.中间固定宽度,两侧自适应 1.1 flex布局 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body,div{ height: 100%; } .left { background-color: #ccc; flex:1; } .mi…

CSS常用样式整理

元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE789*/ background:-moz-linear-gradient(top,#b8…

CSS Flex布局整理

Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素注意兼容问题: webkit内核浏览器应使用前缀-webkit IE浏览器,可以很好的兼容IE11+版本,对于IE10只有部分可以兼容,且使用时需增加-ms,IE10浏览器中容器定义成弹性伸缩盒时,需使用display: -ms-flexbox 示例的dom结构:  <div class="bo…

CSS常用布局技巧实例

末尾用省略号! white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ######################## 两个inline-block之间删除间隔 html中的两个元素换行符删除父元素css添加 font-size: 0; float: left 若想使元素产生模糊效果可以加上滤镜效果在当前元素的样式中机上 filter: blur(10px); 在父元素的样式中加上 overfloat: hidden…

CSS常用布局学习笔记

水平居中-行内元素如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto; } 水平居中-不定宽块元素1 步骤: 添加table元素 table的左右margin设置为auto <table> <tbody> <tr> <td><div class="wrap"> 设置我所在的div容器水平居中 &l…

CSS网页布局垂直居中整理

一.使用CSS3处理垂直居中方式 1.使用Flex布局处理(推荐),简单好用 body,html{ width:100%; height:100%; } .out { width: 20%; height: 50%; border: 1px solid blue; display: flex; justify-content: center; /*水平居中*/ align-items:center;/*垂直方向居中*/ } .inner { width: 50%; height: 50%; ba…

CSS3 Flex布局整理(一)

一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异,需要考虑兼容等问题. 2.CSS Flexbox Flex布局,可以简便.完整.响应式实现各种页面布局.目前,他已经得到所有浏览器的支持(支持CSS3的浏览器). Flex布局将成为围栏布局的首选方案. 二.基本概念 1.Flex是Flexiable Box的缩写,意思是‘弹性布局’,用来为盒状模…

【CSS常用布局整理（二）】的更多相关文章

CSS常用布局整理（二）

CSS常用布局整理

CSS3 Flex布局整理(二)-容器属性

你不知道的css各类布局（二）之流体布局、液体布局、栅格布局

CSS常用布局实现方法

css常用布局

css 常用布局

CSS常用样式（二）

[div+css]网站布局实例二

HTML/CSS 常用单词整理

CSS常用布局方式-两列布局、三列布局

HTML+CSS学习笔记整理二

html+css 常用布局

CSS常用样式整理

CSS Flex布局整理

CSS常用布局技巧实例

CSS常用布局学习笔记

CSS网页布局垂直居中整理

CSS3 Flex布局整理(一)

Css常用的技巧

CSS3 Flex布局整理(三)-项目属性

DIV+CSS常用网页布局技巧！

WPF中的常用布局栈的实现一个关于素数的神奇性质 C# defualt关键字默认值用法接口通俗理解 C# Json序列化和反序列化 ASP.NET CORE系列【五】webapi整理以及RESTful风格化

CSS布局整理

CSS样式常用属性整理

单元测试系列之十：Sonar 常用代码规则整理(二)

CSS常见布局问题整理

【转载】CSS + DIV 实现整理布局

html+css布局整理笔记

前端进阶系列(二):css常见布局解决方案