列布局

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!���֟�

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 浅谈CSS3多列布局 相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: 现在,强大的CSS3为我...
    haileym阅读 2,391评论 0 0
  • CSS3中提供的新属性columns,是用于多列布局的。 在这之前,有些大家习以为常的排版,要用CSS动态实现其实...
    LiLi原上草阅读 2,765评论 1 10
  • CSS3提供了个新属性columns用于多列布局。在这之前,有些大家习以为常的排版,要用CSS动态实现其实是比较困...
    张歆琳阅读 5,706评论 2 6
  • 他们太担心来世了,以至于都没学会怎样在这个世界上生活。 ——《杀死一只知更鸟》 CSS3新增了多列布局特性,它可以...
    BIGHAI阅读 527评论 0 0
  • 弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活...
    faremax阅读 1,573评论 0 0

友情链接更多精彩内容