Python通过selenium操作edge浏览器

(DFS) 简单搜索题的入门 传统的延续

  返回  

五、CSS布局基础

2021/8/22 0:15:16 浏览:

文章目录

  • 5.1 CSS盒模型基础
    • 5.1.1 盒模型结构
    • 5.1.2 定义大小
    • 5.1.3 定义边框
      • 1、定义宽度
      • 2、定义颜色
      • 3、定义样式
    • 5.1.4 定义边界
    • 5.1.5 定义补白
  • 5.2 CSS3完善盒模型
    • 5.2.1 定义显示方式
    • 5.2.2 定义元素尺寸大小
    • 5.2.3 溢出处理
    • 5.2.4 定义轮廓
    • 5.2.5 定义轮廓样式
    • 5.2.6 定义多色边框
    • 5.2.7 定义边框背景


5.1 CSS盒模型基础

5.1.1 盒模型结构

在这里插入图片描述


5.1.2 定义大小

CSS盒子模型使用width(宽)和height(高)定义内容区域的大小。


5.1.3 定义边框

边框样式由CSS的border属性负责定义,border包括3个子属性:border-style(边框样式)、border-color(边框颜色)和border-width(边框宽度)。

1、定义宽度

(1)直接在属性后面指定宽度值。

border-width: 12px;

(2)使用关键字。
thick、medium和thin。有的解析为5px、3px、2px,有的是3px、2px、1px。

(3)单独为元素的某条边设置宽度。

border-top-width: 12px;
border-bottom-width: 12px;

(4)使用border-width属性快速定义边框宽度。

border-width: 2px 4px 6px 8px;  /* 定义上边为2px,右边4px,底边6px,左边8px*/

2、定义颜色

border-top-color: #aaa; 
border-right-color: gray;

3、定义样式

  • none:默认值,无边框。
  • hidden:隐藏边框,IE不支持。
  • dotted:定义边框为点线。
  • dashed:定义边框为虚线。
  • solid:定义边框为实线。
  • double:定义边框为双线边框,两条线及其间隔宽度之和等于指定的border-width值。
  • groove:根据border-color值定义3D凹槽。
  • ridge:根据border-color值定义3D凸槽。
  • inset:根据border-color值定义3D凹边。
  • outset:根据border-color值定义3D凸边。

5.1.4 定义边界

元素的边距由CSS的margin属性控制,margin定义了元素与其它相邻元素的距离。

1、边界相同,直接用margin属性定义,为margin设置一个值即可。
2、边界不同,则可以在margin属性中定义4个值。

margin: top right bottom left;
/* 如果某个边没有定义大小,则可以使用auto(自动)进行代替,避免产生歧义。 */
margin: 1px 1em auto 1em; 

3、如果上下边界不同,左右边界相同,则可以使用3个值进行代替。

margin: top right bottom;
/* 若上下边界相同,左右边界相同,则 */
margin: 12px 24px; 

5.1.5 定义补白

补白是用来调整元素包含的内容元素边框的距离,由CSS的padding属性负责定义。
padding和margin属性一样,不仅快速简写,还可以利用padding-top、padding-right、padding-bottom和padding-left属性来分别定义四边的补白大小。


5.2 CSS3完善盒模型

5.2.1 定义显示方式

box-sizing属性,该属性能够事先定义盒模型的尺寸解析方式。

box-sizing:content-box | border-box | inherit;
  • content-box:该属性值将维持CSS2.1盒模型的组成模式,即元素width/height=border+padding+content
  • border-box:该属性值将重新定义CSS2.1盒模型组成模式,即元素width/heigh=content。此时浏览器对盒模型的解释与IE6解释相同。

5.2.2 定义元素尺寸大小

resize属性,它允许用户通过拖动的方式改变元素的尺寸。主要用于可以使用overflow属性的任何容器元素中。

resize:none | both | horizontal | vertical | inherit;
  • none:浏览器不提供尺寸调整机制。
  • both:浏览器提供双向尺寸调整机制,允许用户调节元素的宽度和高度。
  • horizontal:浏览器提供单向水平尺寸调整机制。
  • vertical:浏览器提供单向垂直尺寸的调整机制。
  • inherit:默认继承。

必须同时定义overflow和resize,否则resize属性声明无效。


5.2.3 溢出处理

overflow属性定义当一个块元素的内容溢出了元素的框时,是否剪切显示。
overflow-x属性定了对左右边的剪切,overflow-y属性定义了对上下的剪切。

overflow-x: visible | hidden | scroll | auto | no-display | no-content;
overflow-y: visible | hidden | scroll | auto | no-display | no-content;
  • visible:不剪切内容,也不添加滚动条。该属性值为默认值。
  • auto:在需要时剪切内容并添加滚动条。该属性为body和textarea元素的默认值。
  • hidden:不显示超出元素尺寸的内容。
  • scroll:当内容超出元素尺寸,则overflow-x显示为横向滚动条,而overflow-y显示为纵向滚动条。

5.2.4 定义轮廓

outline属性,在元素周围绘制一条轮廓线,可以起到突出元素的作用。

outline:[outline-color] || [outline-style] || [outline-width] || [outlineoffset] || inherit
  • <outline-color>:定义轮廓边框颜色。
  • <outline-style>:定义轮廓边框轮廓。
  • <outline-width>:定义轮廓边框宽度。
  • <outline-offset>:定义轮廓边框偏移位置的数值。
  • inherit:默认继承。

5.2.5 定义轮廓样式

1、设置宽度

outline-width: thin | medium | thick | <length> | inherit;
/* 初始值为medium */
  • thin:定义细轮廓。
  • medium:定义中等轮廓。
  • thick:定义粗的轮廓。
  • <length>:定义轮廓粗细的值。
  • inherit:默认继承。

2、设置样式

outlint-style:auto | <border-style> | inherit;
  • auto:根据浏览器自动设置。
  • <border-style>:沿用边框样式。包括none、dotted、dashed、solid、double、groove、ridge、inset、outset。
  • inherit:默认继承。

3、设置颜色

outline-color:<color> | invert | inherit;
  • <color>:可以是颜色名,如red;或者十六进制值,如#ff0000
  • invert:执行颜色反转(逆向的颜色)。
  • inherit:默认继承。

4、设置偏移

outline-offset:<length> | inherit;
  • <length>:定义轮廓距离容器的值。
  • inherit:默认继承。

5.2.6 定义多色边框

border-color属性可以设置边框的颜色。

border-color:<color>;
  • border-top-color:定义指定元素顶部边框的色彩。
  • border-right-color:定义指定元素右侧边框的色彩。
  • border-bottom-color:定义指定元素底部边框的色彩。
  • border-left-color:定义指定元素左侧边框的色彩。

5.2.7 定义边框背景

border-image属性。

border-image:none | <image> | <number> | <percentage>
  • none:默认值,表示边框无背景图。
  • <image>:使用绝对或相对URL地址指定边框的背景图像。
  • <number>:设置边框宽度或者边框背景图像大小,使用固定像素值表示。
  • <percentage>:设置边框背景图像大小,使用百分比表示。

CSS3将border-image分成了8部分。

  • border-top-image:定义顶部边框背景图像。
  • border-right-image:定义右侧边框背景图像。
  • border-bottom-image:定义底部边框背景图像。
  • border-left-image:定义左侧边框背景图像。
  • border-top-left-image:定义左上角边框背景图像。
  • border-top-right-image:定义右上角边框背景图像。
  • border-bottom-left-image:定义左下角边框背景图像。
  • border-bottom-right-image:定义右下角边框背景图像。

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号