列布局

作者: 大笑一声 | 来源:发表于2017-08-23 20:32 被阅读0次

1、Columns列属性

定义:columns 属性是一个简写属性,用于设置列宽和  列数

语法:columns: column-width column-count;

属性值:

column-width:          列宽

column-count:          列数

2、column-gap 设置并列间的间隔单位是px

3、column-rule 设置并列间间隔的表框以及边框的样式

4、 跨列设置

column-span  属性规定元素应横跨多少列

语法:column-span:1 表示只能跨一列

all 跨所有列

5、自由缩放

resize 规定可以由用户调整 div 元素的大小

语法:resize:none:默认值 用户无法调整元素的尺寸。

both:用户可调整元素的高度和宽度。

horizontal :用户可调整元素的宽度

vertical :用户可调整元素的高度。

6、overflow

属性规定当内容溢出元素框时发生的事情

语法:overflow:scroll :内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

visible  :默认值。内容不会被修剪,会呈现在元素框之外

hidden  : 内容会被修剪,并且其余内容是不可见的。

auto : 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit :规定应该从父元素继承 overflow 属性的值。

7、CSS3外轮廓属性

outline(轮廓)是绘制于元素周围的一条线 ,位于边框边缘的外围,可起到突出元素的作用。

外轮廓宽度outline-width

外轮廓样式outline-style

外轮廓颜色outline-color

外轮廓扩展outline-offse

语法:outline-offset: Length: 轮廓与边框边缘的距离。

Inherit:规定应从父元素继承 outline-offset 属性的值

�����t!���֟�

相关文章

  • CSS3开发常用核心技能

    基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局: 二列布局: 三列布局: ⚠️ midd...

  • 页面架构

    布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...

  • css常见布局(二)

    采用flex实现两列,三列等多列的布局 一、两列布局 二、三列布局

  • CSS布局

    布局方式 一列布局 效果: 二列布局 效果: 三列布局 效果: 混合布局 效果: 布局分析 1、标准流 常见块级元...

  • 前端开发-常见CSS布局

    常见的两列布局 float浮动布局 flex布局 常见的三列布局 float浮动布局 position定位 fle...

  • 前端常见布局方式

    常见的布局方式 常见的布局这么几种单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽...

  • 网页基本布局

    网页常见的几种简单布局 单列布局 两列布局 三列布局 通栏布局 单列布局 效果图: top{ }/宽度980px,...

  • 2019-05-09 CSS布局相关

    一,两列布局 1,自适应的两列布局: 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就不需...

  • 常见的布局实现

    本章主要介绍常见的布局实现,包括: [1] 两列布局 [2] 三列布局 [3] 弹性 (Flex) 布局 [1] ...

  • 「CSS」常见布局样例

    自动居中一列布局 横向两列布局 绝对定位的横向两列布局 自动居中一列布局 所需知识: 标准文档流 块级元素 mar...

网友评论

      本文标题:列布局

      本文链接:https://www.haomeiwen.com/subject/wnujdxtx.html