当前位置:首页 > 天道酬勤 > 正文内容

python全栈开发项目(web后端)

张世龙2021年12月20日 05:24天道酬勤910

在布局

一、盒模型

文档时,浏览器的渲染引擎基于标准之一的基于CSS的框模型(CSS basic box model ),将所有元素表示为一个矩形框。 CSS确定这些框的大小、位置和属性(颜色、背景、边框大小等)。

1、盒子)矩形的盒子

行框: display是等于inline的元素,页面内不换行。 浏览器的默认样式表为span、a、img、视频、音频

快速框: display等于block的要素,在页面内换行。 浏览器的默认样式表包括容器元素h1~h6和p

2、box的4个构成要素

从内侧向外侧

内容内容

width、height设定了箱子内容的宽度和高度

填充(内边距)填充

从盒子框到盒子内容的距离

填充左、填充右、填充上、填充下

padding:缩写(速记)属性

padding:上右下左

边框边框

边框=边框样式边框宽度边框颜色

边框样式:边框样式

边框宽度:边框宽度

边框颜色:边框颜色

缩写:边框: 4px固态红色;

外侧的距离为margin

从框到其他箱子的距离

页边距、左页边距、右页边距、右页边距、右页边距

二、盒模型应用

1、宽度、高度的设定

默认情况下,width和height设置内容框的宽度和高度。

设计器提供的psd图像的宽度高度是内容框中包含边距边框的宽度高度

解决方案:

正确的计算

CSS3:box-sizing

2、改变背景的涵盖范围

默认情况下,背景复盖边界框

可以通过background-clip更改背景复盖范围

3、溢出处理

overflow,控制内容溢出到包围盒后的处理方法

4、断字的规则

不显示内容时,断字规则,即换行的规则

属性名称: word-break

作用:影响文字在哪里换行

normal :普通。

CJK (中国日本韩国)文字(文字位置截断)、CJK以外的文字) )单词位置截断) )。

全部:舍弃一切。

所有文字在文字处被截断

全部保持:保持一切。

所有文字在单词之间被截断,中文之间没有空格的只有一个单词

5、文字不换行,显示.

空白: nowrap; /*不换行*

溢流:隐藏; //隐藏溢出/

文本溢出:电子线路; /*溢出部分用省略符号代替*

三、上一集

《Python Web全栈之旅05--Web前端CSS层叠样式的理解》

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/25409.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。