python网站创建007:常见CSS样式

1. 高度和宽度

注意1:默认情况下高度和宽度无法应用在行内标签上

注意2:默认情况下, 块级标签虽然设置了宽度, 但是右边空白区域是不允许占用的

高度

宽度

块级标签转换为行内标签

内容

行内标签转换为块级标签

内容

同时拥有块级标签和行内标签

内容

文本左右对齐,默认是左对齐的

这是左对齐的文本内容。

这是右对齐的文本内容。

文本中间对齐

这是居中对齐的文本内容。

文本的的顶部对齐、中间对齐、底部对齐

上对齐的文本

下对齐的文本

垂直居中对齐的文本

去掉body外边距





    
    Title
    



外边距(所有方向外边距):元素的上下左右外边距都被设置为10像素。

margin: 10px;

上下、左右外边距:元素的上下外边距被设置为10像素,左右外边距被设置为20像素

margin: 10px 20px;

上、左右、下外边距:元素的上外边距被设置为10像素,左右外边距被设置为5像素,下外边距被设置为15像素

margin: 10px 5px 15px;

分别设置上、右、下、左外边距:元素的上外边距被设置为10像素,右外边距被设置为20像素,下外边距被设置为15像素,左外边距被设置为5像素

margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;

内边距(设置所有方向的内边距):元素的上下左右内边距都被设置为10像素。

padding: 10px;

设置上下、左右内边距:元素的上下内边距被设置为10像素,左右内边距被设置为20像素。

padding: 10px 20px;

设置上、左右、下内边距:元素的上内边距被设置为10像素,左右内边距被设置为5像素,下内边距被设置为15像素。

padding: 10px 5px 15px;

分别设置上、右、下、左内边距:元素的上内边距被设置为10像素,右内边距被设置为20像素,下内边距被设置为15像素,左内边距被设置为5像素。

padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;

float(浮动):左右浮动

左浮动
右浮动

float(浮动):设置左右浮动距离

左浮动 20px
右浮动 30px

你可能感兴趣的:(python,css,开发语言,前端)