css文字竖直显示_CSS属性设置 -- 盒子模型

Ⅰ 简介

HTML文档中的每个元素都被比喻成盒子,盒子模型通过四个边界来描述
- margin -- 外边距,一个相框与另外一个相框之间的距离
- border -- 边框,边框指的就是相框
- padding -- 内容,内容/相片与边框的距离
- width--宽度height 高度,指定可以存放内容的区域

Ⅱ 盒子模型的宽度和高度

内容的宽度和高度 -- 通过标签的width和height属性设置
元素/盒子模型的宽度和高度
- 宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度
- 高度= 。。。。
元素/盒子模型空间的宽度和高度
- 宽度= 左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距
- 高度= 。。。。

Ⅲ CSS显示模块:块级行内行内块级

在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
HTML中容器级与文本级
- 容器级标签：可以嵌套其他的所有标签 div、h、ul>li、ol>li、dl>dt+dd
- 文本级标签：只能嵌套文字、图片、超链接 span、p、buis、strong、em、ins、del
CSS中块级与行内
- 块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级 div、h、ul、ol、dl、li、dt、dd 还有标签p
- 行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内 span、buis、strong、em、ins、del
块级元素与行内元素
- 块级元素block
  - 独占一行
  - 可以设置宽高
  - 若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
  - 若没有设置宽高，那么就按照设置的来显示
- 行内元素inline
  - 不会独占一行
  - 不可以设置宽高
  - 盒子宽高默认和内容一样
- 行内块级元素inline-block
  - 不会独占一行
  - 可以设置宽高

Ⅳ CSS显示模块转换

display
- 可以通过标签的display属性设置显示模式
- none HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
- block 块级
- inline 行内
- inline-block 行内块级
display:"none"与visibility:hidden的区别：
- visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
- display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

Ⅴ div与span标签

div标签
- 一般用于配合css完成网页的基本布局
span标签
- 一般用于配合css修改网页中的一些局部信息，比如一行文字我们只为一部分加颜色<p>我是<span>egon</span></p>
div和span有什么区别
- div一般用于排版，而span一般用于局部文字的样式
- 站在HTML的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行
- 站在CSS的角度：div是一个容器级标签，而span是一个文本级标签

css文字竖直显示_CSS属性设置 -- 盒子模型相关推荐

highcharts特殊定制：x轴文字竖直显示（兼容各浏览器）
做项目要用到highcharts画柱状图,可是x轴数据过多,如果文字从左至右显示显得拥挤不堪,于是想竖起显示,于是想到用xAxis的rotation属性,把文字旋转90度,可是这样文字显示虽然是竖直但 ...
css样式如何设置边框，阴影，渐变等特效以及通过box-sizing属性设置盒子模型，背景区域设置等
今天,我继续来和大家聊聊css3. 在css3中,新增了很多样式,使得页面更加的美观,效果更加的优秀. 但是,同样要注意的是,很多css3提出的新样式没有得到浏览器的支持,也就意味着有一部分的css3 ...
html文字竖直书写,css 文字竖直居中的写法和图片垂直居中代码(图文)
界面上文章左右居中使用text-aligin:center,上下竖直居中的写法如下, 图片垂直居中的代码文字.图片居中显示的方法 .content{ height: 40px; line-heigh ...
Echarts 问题解决 —— 设置图例、提示框上下角标；坐标轴文字过多显示不全、文字竖直一列显示、让坐标轴类目隔一个换一行；
目录 1.设置图例.提示框上下角标 1.1 修改弹框内容的方法 1.2 修改图例文字的方法 1.3 在 rich 中单独设置角标 1.4 实战 2.坐标轴文字过多显示不全 2.1 方法一:将坐标轴上 ...
QT 设置QLabel文字竖直居中
QT 设置QLabel文字竖直居中设置水平居中是Qt::AlignCenter或Qt::AlignHCenter,竖直(vertical)是Qt::AlignVCenter. myLabel -&g ...
python绘制直方图横坐标标签竖直显示的方法
python中用matplotlib画图时,横坐标标签是默认横着显示的,如下图: 看起来不太美观,要想使其竖直显示,使用下边一行代码即可: plt.xticks(rotation = 360) rot ...
excel如何使单元格里的文字竖着显示
为了一些特殊的效果,需要用到文字竖着显示,那么如何在Excel里面怎样让单元格里的文字竖着显示? 1,新建表格,输入示例文字,如图所示. 2,选中单元格点击上方工具栏"选项",然后 ...
关于css设置盒子模型，设置像素与实际像素不同的问题
关于css设置盒子模型,设置像素和实际像素不同的问题写网页时,发现自己网页设置盒子像素和实际用ps量的像素不同.盒子模型的margin和padding也对,网页的缩放也时100%,但就是不同. 分析 ...
[css] 说说你对低版本IE的盒子模型的理解
[css] 说说你对低版本IE的盒子模型的理解一个CSS盒子由四部分组成,由内到外依次是:content.padding.border.margin.所谓盒子模型定义的是盒子宽高的计算方法,IE盒子 ...

css文字竖直显示_CSS属性设置 -- 盒子模型

Ⅰ 简介

Ⅱ 盒子模型的宽度和高度

Ⅲ CSS显示模块:块级行内行内块级

Ⅳ CSS显示模块转换

Ⅴ div与span标签

css文字竖直显示_CSS属性设置 -- 盒子模型相关推荐

最新文章

热门文章