租房信息网站建设,如何建立一个网站的数据库文件,摄影网站需求分析,怎么建立一个自己的网站1. 前言 网页布局是CSS的重点功能#xff0c;布局的传统方案是基于盒子模型#xff0c;依靠display属性、position属性和float属性#xff0c;它对一些特殊布局很麻烦。 CSS3推出的Flex布局和网格布局#xff0c;让开发者更容易定制自己想要的布局。本篇梳理和总结一些布局…1. 前言 网页布局是CSS的重点功能布局的传统方案是基于盒子模型依靠display属性、position属性和float属性它对一些特殊布局很麻烦。 CSS3推出的Flex布局和网格布局让开发者更容易定制自己想要的布局。本篇梳理和总结一些布局方式。
2. CSS3多列
CSS属性说明示例columns功能column-width column-count;的简写 div { column-count: 3; column-gap: 10px; column-rule: 1px solide red; } column-width 功能指定各列的宽度 取值auto | length column-count 功能指定需要分割的列数 取值number | auto column-span 功能指定元素跨越多少列 取值1 | all column-gap 功能列与列之间的间隙 取值length | normal column-rule 功能column-rule-width column-rule-style column-rule-color;的简写 column-rule-width 功能列与列之间的边框线宽度 取值thin | medium | thick | length column-rule-style 功能列与列之间的边框线类型 取值 1. none 没有规则 2. hidden 隐藏规则 3. dotted 点状规则 4. dashed 虚线规则 5. solid 实线规则 6. double 双线规则 7. groove 定义 3D grooved规则。该效果取决于宽度和颜色值 8. ridge 定义 3D ridged规则。该效果取决于宽度和颜色值 9. inset定义 3D inset规则。该效果取决于宽度和颜色值 10. outset定义 3D ouset规则。该效果取决于宽度和颜色值 column-rule-color功能列与列之间的边框线颜色
本小节整理参考于CSS3 多列 | 菜鸟教程 (runoob.com)
3. CSS3 Flex布局
CSS属性说明示例display: flex | inline-box 功能定义当前元素为弹性容器flex container所有子元素成员容器成员flex item 注父元素定义为弹性布局子元素的float、clear和vertcial-align属性会失效 div { display: flex; } 容器属性设置在父元素上的CSS属性flex-flow功能flex-direction flex-wrap;的简写形式 div { display: flex; flex-direction: column; flex-wrap: wrap; /*flex-flow: column wrap; */ } flex-direction 功能决定主轴的方向即项目的排列方式 取值row | row-reverse | column | column-reverse 1. row 主轴水平方向起点在左端默认值 2. row-reverse 主轴水平方向起点在右端 3. column 主轴在垂直方向起点在顶端 4. column-reverse 主轴在垂直方向起点在底端 flex-wrap 功能决定项目一条轴排不下的情况如何换行 取值nowrap | wrap | wrap-reverse 1. nowrap 不换行默认值 2. wrap 换行第一行在上方 3. wrap-reverse 换行第一行在下方 justify-content 功能决定项目在主轴上的对齐方式 取值flex-start | flex-end | center | space-between | space-evenly | space-around | initial | inherit 1. flex-start 左对齐默认值 2. flex-end 右对齐 3. center 居中 4. space-between 两端对齐项目之间间隔相等 5. space-evenly 均匀排列每个元素每个元素之间的间隔相等 6. space-around 每个项目两侧间隔相等项目两两之间的间隔比项目与边框之间的间隔大一倍 7. intial 设置该属性为它的默认值 8. inherit 从父元素继承 略align-items 功能决定项目在交叉轴上的对齐方式 取值flex-start | flex-end | center | baseline | stretch 1. flex-start 交叉轴的起点对齐 2. flex-end 交叉轴的终点对齐 3. center 交叉轴的中点对齐 4. baseline 项目的第一行文字的基线对齐 5. stretch 如果项目未设置高度或设为auto将占满整个容器的高度默认值 略align-content 功能决定多根轴线在交叉轴上的对齐方式多根轴线的高度加起来小于交叉轴所有可用空间垂直 取值flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit 1. flex-start 与交叉轴的起点对齐 2. flex-end 与交叉轴的终点对齐 3. center 与交叉轴的中心对齐 4. space-between 与交叉轴两端对齐轴线之间的间隔均匀分布 5. space-around 每根轴两侧的间隔都相等轴线两两之间的间隔比轴线与边框之间的间隔大一倍 6. stretch 轴线占满整个交叉轴默认值 7. intial 设置该属性为它的默认值 8. inherit 从父元素继承 略项目属性设置在子元素上的CSS属性order 功能决定项目的排列顺序、数值越小越靠前 取值number默认0 .item { order: 1; } flex 功能flex-grow flex-shrink flex-basis;的简写后两个属性可选 注 flex: auto表示flex: 1 1 auto; flex: none表示flex: 0 0 auto; .item { flex: 1 2 30px; } flex-grow 功能决定项目的放大比例即剩余空间按比例等分比如剩余空间100px3个项目的flex-grow为1, 2, 3则各项目在自身基础上分别加上 16.67px, 33.33px, 50px 取值number默认00表示不放大 flex-shrink 功能决定项目的缩小比例比例值越大缩的越小 取值number默认1如空间不足该项目将缩小 flex-basis 功能在分配多余空间之前项目占据主轴的空间 取值length | auto 默认auto align-self 功能决定单个项目有与其他项目不一样的对齐方式 取值auto | flex-start | flex-end | center | baseline | stretch 1. 父元素定义了align-items则auto表示继承父元素的align-items的值 2. 父元素未定义align-items则auto表示stretch .item { align-self: flex-end; } 本小节整理参考于Flex 布局语法教程 | 菜鸟教程 (runoob.com)
4. CSS3网格布局
CSS属性说明示例display:grid | inline-grid 功能定义当前元素为网格容器grid container所有直接子元素都将成为网格元素。 略 网格容器属性grid 功能属性的简写 取值 1. none 不定义行或列的尺寸默认值 2. grid-template-rows / grid-template-columns 2. grid-template-areas 3. grid-template-rows / grid-auto-columns 4. grid-auto-rows / grid-template-columns 5. grid-template-rows / grid-auto-flow grid-auto-columns 6. grid-auto-flow grid-auto-rows / grid-template-columns 7. intial 设置该属性为它的默认值 8. inherit 从父元素继承 div { display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: 50px 80px; } grid-template 功能属性简写 取值 1. none 不指定行与列的大小默认值 2. grid-template rows / grid-template-columns 3. grid-template-areas 4. intial 设置该属性为它的默认值 5. inherit 从父元素继承 略grid-template-rows 功能用于设置网格布局中的行数及高度 取值none | auto | max-content | min-content | length | initial | inherit 1. none 不指定行的大小默认值 2. auto 行的大小由容器的大小及行中网格元素内容的大小决定 3. max-content 每行的大小设置为该行中最大网格元素的大小 4. min-content 每行的大小设置为该行中最小网格元素的大小 5. length 长度值 px或%0是默认值 6. initial 将此属性设置为默认值 7. inherit 从父元素中继承该属性 略grid-template-columns 功能用于设置网格布局中列数及宽度 取值none | auto | max-content | min-content | length | initial | inherit 1. none 不指定列的大小默认值 2. auto 列的大小由容器的大小及列中网格元素内容的大小决定 3. max-content 每列的大小设置为该列中最大网格元素的大小 4. min-content 每列的大小设置为该列中最小网格元素的大小 5. length 长度值 px或%0是默认值 6. initial 将此属性设置为默认值 7. inherit 从父元素中继承该属性 注可以使用单位fr1fr表示一等份 grid-template-areas 功能用于设置网格布局 取值none | itemnames 1. none 没有引用命名的网格 2. itemnames 指定每列和每行应如何显示 注.号表示没有名称的网格项 .item1 { grid-area: myArea; } .grid-container { grid-template-areas: myArea myArea . . .; } grid-auto-rows 功能用于设置网格容器中行的默认大小 取值auto | max-content | min-content | length 注仅影响未设置大小的行 略grid-auto-columns 功能用于设置网格容器中列的默认大小 取值auto | max-content | min-content | length 注仅影响未设置大小的列 略grid-auto-flow 功能精确指定在网格中被自动布局的元素怎样排列 取值row | column | dense | row dense | column dense 1. row 通过填充每一行放置网格元素在必要时增加新列默认值 2. column 通过每一列来放置网格元素在必要时增加新列 3. dense 该关键字指定自动布局算法使用一种稠密堆积算法如果后面出现了稍小的元素则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白但同时也可能导致原来出现的次序被打乱 4. row dense 按行来填充网格中前面留下的空白 5. column dense 按列来填充网格中前面留下的空白 略justify-content 功能用于对齐网格内的网格 取值flex-start | flex-end | center | space-between | space-evenly | space-around | initial | inherit 1. flex-start 左对齐默认值 2. flex-end 右对齐 3. center 居中 4. space-between 两端对齐项目之间间隔相等 5. space-evenly 均匀排列每个元素每个元素之间的间隔相等 6. space-around 每个项目两侧间隔相等项目两两之间的间隔比项目与边框之间的间隔大一倍 7. intial 设置该属性为它的默认值 8. inherit 从父元素继承 注网格的总宽度必须小于容器的宽度才能使justify-content属性生效 略align-content 功能决定多根轴线在交叉轴上的对齐方式多根轴线的高度加起来小于交叉轴所有可用空间垂直 取值flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit 1. flex-start 与交叉轴的起点对齐 2. flex-end 与交叉轴的终点对齐 3. center 与交叉轴的中心对齐 4. space-between 与交叉轴两端对齐轴线之间的间隔均匀分布 5. space-around 每根轴两侧的间隔都相等轴线两两之间的间隔比轴线与边框之间的间隔大一倍 6. stretch 轴线占满整个交叉轴默认值 7. intial 设置该属性为它的默认值 8. inherit 从父元素继承 略网格间隔 grid-gapgap 功能grid-row-gap grid-column-gap;的简写 略 grid-row-gaprow-gap 功能设置网格行之间的网格间隔略 grid-column-gapcolumn-gap 功能设置网格列之间的网格间距略网格元素属性grid-area 功能简写属性 取值grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname 1. grid-row-start / grid-column-start / grid-row-end / grid-column-end 2. itemname 指定元素名称 略grid-row 功能简写属性 取值grid-row-start / grid-row-end 略grid-row-start 功能指定哪一行开始显示网格元素 取值auto | row-line 1. auto 按正常顺序排列 2. row-line 设置第几行开始 略grid-row-end 功能指定哪一行停止显示网格元素 取值auto | row-line | span n; 1. auto 按正常顺序排列 2. row-line 设置第几行结束 3. 跨n行 略grid-column 功能简写属性 取值grid-column-start / grid-column-end 略grid-column-start 功能指定哪一列开始显示网格元素 取值auto | span n | column-line 1. auto 网格元素按流设置默认值 2. span 指定网格元素将跨越的列数 3. 指定从哪列开始显示网格元素 略grid-column-end 功能指定哪一列结束显示网格元素 取值auto | span n | column-line 1. auto 网格元素按流设置默认值 2. span 指定网格元素将跨越的列数 3. 指定从哪列结束显示网格元素 略
本小节梳理参考于CSS 网格布局 | 菜鸟教程 (runoob.com)
5. 多媒体查询 CSS2也有media规则CSS3进行改进CSS3 media语法如下
media not|only mediatype and (mediafeature and|or|not mediafeature) {CSS-Code;
}
或者通过link标签根据条件使用不同的外部样式表
link relstylesheet mediamediatype and|not|only (expressions) hrefprint.css media可以检测4种媒体类型如下
值说明all所有多媒体类型设备screen电脑屏幕、平板、智能手机print打印机speech屏幕阅读器
媒体查询规则用到的操作符
操作符说明and与将多种媒体查询规则组成成单条媒体查询所有查询规则都为真则该媒体查询为真 or 或逗号, 或将多种媒体查询规则组成成单条媒体查询有一条查询规则为真则该媒体查询为真not非查询规则为真时返回trueonly仅整个匹配才用于应用样式 媒体功能
值说明aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率color定义输出设备每一组彩色原件的个数。如果不是彩色设备则值等于0color-index定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表则值等于0device-aspect-ratio定义输出设备的屏幕可见宽度与高度的比率。device-height定义输出设备的屏幕可见高度。device-width定义输出设备的屏幕可见宽度。grid用来查询输出设备是否使用栅格或点阵。height定义输出设备中的页面可见区域高度。max-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。max-color定义输出设备每一组彩色原件的最大个数。max-color-index定义在输出设备的彩色查询表中的最大条目数。max-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。max-device-height定义输出设备的屏幕可见的最大高度。max-device-width定义输出设备的屏幕最大可见宽度。max-height定义输出设备中的页面最大可见区域高度。max-monochrome定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。max-resolution定义设备的最大分辨率。max-width定义输出设备中的页面最大可见区域宽度。min-aspect-ratio定义输出设备中的页面可见区域宽度与高度的最小比率。min-color定义输出设备每一组彩色原件的最小个数。min-color-index定义在输出设备的彩色查询表中的最小条目数。min-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最小比率。min-device-width定义输出设备的屏幕最小可见宽度。min-device-height定义输出设备的屏幕的最小可见高度。min-height定义输出设备中的页面最小可见区域高度。min-monochrome定义在一个单色框架缓冲区中每像素包含的最小单色原件个数min-resolution定义设备的最小分辨率。min-width定义输出设备中的页面最小可见区域宽度。monochrome定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备则值等于0orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。resolution定义设备的分辨率。如96dpi, 300dpi, 118dpcmscan定义电视类设备的扫描工序。width定义输出设备中的页面可见区域宽度。
本小节梳理参考于CSS3 media查询 | 菜鸟教程 (runoob.com)
注以上如有不合理之处还请帮忙指出大家一起交流学习~
