Css 常用布局方式
1.CSS 参考手册
2.元素的分类
首先我们要知道一共有几种元素
1.行内元素(可以与其他行内元素位于同一行,不会以新行开始高度、宽度不能设置)
2.块级元素(每个块级元素都从新的一行开始,其后的元素也另起一行。默认排列方式:从上至下元素的高度、宽度、行高、内外边距都可设置)
3.行内块元素(和其他元素都在一行上元素的高度、宽度、行高、内外边距 都可设置)
3.布局的三大分类
1.float浮动布局
浮动元素的顶部,在标准文档流的底部
- 对div2进行浮动:浮动元素的顶部,在标准文档流的底部
- 对div3和div3进行浮动:浮动元素会显示在同一行,依次排列
- 对div2、div3和div4进行浮动:如果宽度不够,被浮动的元素会自动换行
- 对div2、div4进行浮动:浮动元素的顶部,在标准文档流的底部
2.position 定位
1.relative 相对定位:相对原来位置,偏移一定距离
2.absolute 绝对定位:相对于position不为static的父元素,偏移一定距离
父相子绝:父元素relative,子元素absolute
3.fixed 固定定位:相对浏览器定位
4.static 没有定位
3.flex布局
1.父元素属性
row 行排布
row-reverse 同一行反向排布
column 列排布
column-reverse 同一列反向排布
2.justify-content 主轴子元素排列
flex-start 从头部排列
flex-end 从尾部排列
center 居中排列
space-around 平分剩余
space-between 两边贴边,平分剩余
3.align-items 侧轴方向,子元素的排列
flex-start 从上到下
flex-end 从下到上
stretch 拉伸(子元素去掉高度)
center 居中
4.flex-wrap属性 子元素是否换行
wrap 换行
no-wrap 不换行
5.align-content属性 子元素整体,在父元素中的对齐方式
flex-start 侧轴头部排列
flex-end 侧轴尾部排列
center 居中排列
space-around 侧轴平分空间
space-between 两侧贴边,平分剩余空间
2.子元素属性
1.flex属性(份数)
flex:1
2.align-self 属性(自己的对齐方式)
stretch 拉伸
center 居中
start 左对齐
end 右对齐
Css 常用布局方式相关推荐
- CSS 多种布局方式
css布局是工作中最常碰到的,同时也是笔试 or 面试中会被问到的问题,故在本文整理了css多种布局方式,以供参考. 此篇较长四千五百字左右,读者可分三部分阅读,水平居中布局,垂直居中布局,水平居中 ...
- html5多行布局,css常用布局多行多列
CSS布局常用的方法:float : none | left | right 取值: none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工 ...
- html常用布局和写法,HTML+CSS入门 css常用布局多行多列解析
CSS布局常用的方法:float : none | left | right 取值: none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工 ...
- web前端html+css常用布局05列表布局
web前端html+css常用布局05列表布局 注意:引入jquery的jquery-2.1.4.min.js包 图片从自己目录中路径. 代码: <!DOCTYPE html> <h ...
- 常用布局方式与常用css
目录 1.弹性盒布局方式 2.网格布局 3. 百分比布局 4.三块布局 5.媒体查询 6.style中使用三元运算符 7.做一个透明盒子 8.根据条件加class 9.让背景根据屏幕拉伸 1.弹性盒布 ...
- 1._请写出5种以上的android中界面常用布局方式,跳槽季“充电宝”Android面试题(一)...
1.请介绍下Android中常用的5种布局 Android中常用的5种布局分别为:FrameLaout(框架布局).LinearLayout(线性布局).AbsoluteLayout(绝对布局).Re ...
- CSS之布局方式(内/外部显示及inline-block显示类型)附<行内块空白间隙解决方案>
文章目录 一.布局方式 1. 外部显示类型 a.块级盒子/元素 b.行内盒子/元素 2. 内部显示类型 2.1 flex 流式布局 二.行内块元素inline-block 显示类型 2.1行内块的空白 ...
- 常见的CSS页面布局方式
详情:CSS页面结构是我们日常生活中最常使用到的,当然目前可能大家用的最多的是elementUI实现布局,简单方柏霓,下面介绍几种常见的原生页面布局的方式 公共的样式部分 <style>* ...
- HTML常用布局方式
前言:对HTML的学习,在了解了基础的语法之后,需要学习与掌握的是,HTML的基础布局方式,这个是网页布局的基础,本文讲解是当前常用布局. 布局一 示例图: 代码部分: <!DOCTYPE ht ...
最新文章
- centos6.4 yum装php,CentOS6.x/6.5/6.4/6.3/6.2/7.x 64位安装php5.2(使用YUM自动安装)
- 7本书带你掌握数据科学中的数学基础(附下载)
- CommonDialog控件
- 【图像处理】——图像的灰度化处理(Python实现三种方法——最大值法、平均值法、加权均值法、gamma校正)
- 微型计算机硬盘为什么要分区,为什么懂电脑的人,都说硬盘不需要分区?看完你就知道了...
- python3 os_Python3 标准库:os
- Linux理论05:Linux的目录结构
- python生成随机密码串
- 垂直搜索引擎模块设计
- ruby gem 记录
- OpenCV(项目)人脸识别(图片识别、摄像头识别)
- linux查看cuda驱动程序,我的nvidia驱动程序的正确CUDA版本是什么?
- Java变量命名规范
- matlab支持向量机预测电机故障,关于支持向量机(SVM)的一个简单应用实例及matlab代码...
- 微信小程序 带可拖动进度条和时间显示的音频播放器
- 移动apn接入点哪个快_51物联卡:使用物联网卡时为什么总要让你设置APN?
- Navicat 显示底部搜索栏
- macOS开发中用TagLib获取、修改音频文件信息
- 网页默认打印:fixed布局的内容会在每页打印,遮挡其他内容
- 原理竟然是这!mysql集群方案pxc