css自动换行加前置_StudyNode -- CSS

引入CSS的几种方式
block, inline, inline-block
box-sizing
块级/内联元素的高度
元素横向陈列的方法
CSS画三角形

引入CSS的几种方式：

1.内联样式引入：

写在标签里

2.通过<style>标签引入：（<style>一般放在<head>里）

3.外部样式引入：（用<link>）

4.import另一个css文件（不常用）

块级元素（block）：

块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性。

内联元素（inline）：

内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，对inline元素设置width,height属性无效。

inline-block：

我们有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。

box-sizing：

定义了 user agent 应该如何计算一个元素的总宽度和总高度。

属性

content-box 默认值，标准盒子模型。 width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

文档流：

就是文档内元素的流动方向。

块级元素的高度：

由其内部的文档流元素的高度总和决定。

内联元素（红框）从左往右流动，如果流动受到阻碍，换行继续流动。

一个元素如果是中文，遇到换行会被切割（一部分留在第一行一部分已经到第二行）
一个元素如果是英文，遇到换行不会被切割（超出部分不显示），要使它换行显示需要 word-break: break-all 代码实现。

块级元素（绿框）从上往下流动（每一个块占一行）。

内联元素的高度：

很难精确确定，一般由最高的那个元素决定（同一字符因字体不同高度也会不同）。

所以如果需要确定的高度，就自己定义一个行高 line-height: **px;

⚠️字体基于基线对齐

让元素横向陈列的方法之一：

1.在所有子元素上加float；

2.在父元素上加clearfix（固定代码背下来）消除float产生的bug

⚠️排查bug可以通过给元素加border边框

CSS画三角形 （实现过程）

css自动换行加前置_StudyNode -- CSS相关推荐

css自动换行加前置_CSS实现自动换行的技巧
1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准. #wrap{white-space:normal; width:200px; ...
怎么在css中加横线分层,CSS分层
为什么要分层? SMACSS BEM SUIT ACSS 原因 CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理大量的样式,覆盖.权重和很多!importa ...
css英文文本不换行,CSS样式表让英文文本自动换行
大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是CSS如何将他们自动换行的方法!对于Div和table以及不同的浏览器,实现css自动换行的方法都稍有不同,下面分别介绍: ...
css input 内容换行显示,CSS - 如何实现强制不换行、自动换行、强制换行以及 chrom默认焦点 IE下 Input 默认出现叉...
*:focus {outline: none;} input::-ms-clear {display:none;} 一般的文字截断(适用于内联与块): .text-overflow { display ...
html p自动换行超出省略,CSS自动换行、强制不换行、强制断行、超出显示省略号...
CSS自动换行.强制不换行.强制断行.超出显示省略号 CSS自动换行.强制不换行.强制断行.超出显示省略号 CSS样式设置自动换行.强制不换行.强制断行.超出显示省略号 P标签是默认是自动换行的,因此 ...
CSS响应式：根据分辨率加载不同CSS的几个方法
一般情况下,根据分辨率加载pc端 wap端 pad端三个css文件,示例: <link rel="stylesheet" type="text/css" ...
ASP.NET使用母版页后动态加载JS/CSS
ASP.NET中使用母版页最大的好处就是当有许多相似的页面时只用加一个母版页,每个页面用这个母版页生成内容页,然后根据情况修改每个内容页中的内容,保持页面布局的统一,同时也减少了代码量. 但另一个突出 ...
CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
Yii资源包加载JS/CSS
1.资源包 Yii 在资源包中管理资源,资源包简单的说就是放在一个目录下的资源集合, 当在视图中注册一个资源包, 在渲染 Web 页面时会包含包中的 CSS 和 JavaScript 文件. 2.定义 ...

css自动换行加前置_StudyNode -- CSS

css自动换行加前置_StudyNode -- CSS相关推荐

最新文章

热门文章