文档流&文字&CSS常用命令

zebrayoung 发布于2019-08-30 14:13 / 1764人阅读

摘要：文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用属性想打断的内联元

文档流

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

流动方向

内联元素从左往右流，宽度不够，之字形，且元素会被截断

块元素从上往下流动，一排一排

注意事项

内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断

若想打断上述联结，请使用css属性

/*想打断的内联元素*/{
    word-break: break-all;
    display: inline-block;
}

脱离文档流

类似悬浮在页面上一样

position: fixed;

position: absolute;

关于字体

一般，页面默认字体大小16px

字体一般都分为上部、中部、下部
文字（汉字、西文）都相对基线（下部）对齐

不同字体有自己规定的建议行高，可以自行line-height规定

CSS常用命令 字体相关

设定字体样式

/*各类选择器*/{
    font-family: kai;
}

字体加粗

/*各类选择器*/{
    font-weight: bold;
}

字体大写

/*各类选择器*/{
    text-transform: uppercase;
}

背景相关

背景位置与自适应

/*各类选择器*/{
    background-position: center center;/*水平方向*/ /*垂直方向*/
    background-size: cover;/*背景自适应*/
    background: url(背景图片地址);
}

设定内外边距padding margin

/*各类选择器*/{
    padding: 10px 20px 30px 40px;/*上 右 下 左*/
    margin: 10px 20px 30px 40px;/*上 右 下 左*/
}

/*各类选择器*/{
    padding: 10px 30px;/*上 右 下 左*/
    margin: 10px 30px;/*上下 左右*/
}

margin甚至可以调成负值，往反方向移呗

内联元素左右 padding有用，上下 padding不影响页面布局，位置不变。可以设置css：display: line-block;，使上下左右padding都生效。

position定位

（详细请阅读：https://developer.mozilla.org...）(๑•̀ㅂ•́)و✧

/*各类选择器*/{
    position: relative/absolute/fixed/sticky/static;
}

fixed       元素的宽度会自动缩成最小、最紧凑的宽度
            可以使用 width height 调整大小
            可以使用 top left right bottom 调整位置
            可以使用 left: 0; right: 0; 来使元素充满

absolute    可以设置子元素 position: absolute;
                   父元素position: elative;
            子元素相对父元素绝对定位

子元素居中

水平居中

/*想要子元素居中的元素*/{
    text-align: center;
}

垂直居中

/*使用vertical-align要求父元素必须有行高，如果没有的话，一定要手动添加：line-height: ;*/

/*想要居中的子元素*/{
    verticle-align: center;
}

使内联元素在页面中居中：用一个块元素包着它，然后加上css：


    

  
div{
    text-align: center;
}

设置子元素高度height: 100%;，在父元素上加上上下等量的 padding


    

  
div{
    padding: 10px;
}

span{
    height: 100%;
}

使用flex布局：左右居中，垂直居中。在父元素上加上如下 css：

/*某父元素*/{
    display:flex;
    align-items:center;
    justify-content:center;
}

边框

边框圆角

/*想要圆角边框的元素*/{
    border: 1px solid red;    //设置元素边框
    border-radius: 30px;      //设置边框圆角30px
}

图标

可以登录网站：http://www.iconfont.cn/，添加网站生成的到 html 里

给添加 css属性改变样式

svg{
    width:
    height:
    fill:    /*颜色*/
    margin:
    padding:
}

其它

鼠标悬停

/*各类选择器*/:hover{
    color: red;
}

继承父辈属性
并不是所有属性都能继承的

/*各类选择器*/{
    color: inherit;
}

css碎碎念

标签去掉列表下划线

a{
    text-decoration: none;
}

内联元素不能制定高度（height）和宽度（width）
要转变为块级元素（display: block;）或内联块级元素（display: inline-block;）

自己写的属性优先级比浏览器和默认的高

行高line-height可决定内联元素高度

html编程中两行代码中间的空格和回车都会变成一个空格

同样颜色不同字体上有不同颜色

设置上下 padding 一样就是居中，仅对块元素生效，内联元素无效

行高line-height和字高font-size的差值会自动的填充在字体的上下

border 与浮动

动画操作（如 :hover）border后，元素会左右浮动，
这是由于一开始没有 border，操作后多出来了，
将元素一开始就添加【透明 border】，坑先站好啊，之后动画 border 颜色的显现

内联元素盒模型超过父辈

一些默认 display: inline; 的元素被包起来的时候，它的 padding 和margin 有时会超过父辈
需要设定 display: block; 解决

/*内联元素*/{
    display: block;
}

div 高度由其内部文档流元素的高度总和决定
内联的高度任性，强行准确测量意义不大

设定元素的宽高

weight       锁定宽度，浏览器窗口变小，用滚动条的方式
max-weight   设定最大宽度，浏览器窗口变小，自适应窗口，推荐
当设定了宽度或是最大宽度，使用 margin-left:auto; margin-right:auto; 使元素居中

内联元素不接受设定宽高，设定display: inline-block;
不过支持padding、margin，可以用来代替

为防止在不同电脑上效果不一致，可以在css里再表示下元素的大小，用来确认

云服务器 GPU云服务器文字自动&039&039到google linux常用命令文档 asp &amp&amp逻辑 js 2&amp&amp1

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115858.html

文档流&amp;文字&amp;CSS常用命令

摘要：文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用属性想打断的内联元文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排 sho...

pingink 2019-08-01 18:43 评论0 收藏0
一个后端开发者的前端语言基础：HTML5 &amp; CSS

摘要：每个标签可有一个独立的号。该标签是一个内联元素，与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。前端语言基础：HTML5 & CSS (一) HTML5：超文本标记语言 (1) 基本概念是由一系列成对出现的元素标签（标记）嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现，用于标记文本内容的含义浏览器通过元素标签解析文本内容并...

ACb0y 2019-08-19 10:27 评论0 收藏0
一个后端开发者的前端语言基础：HTML5 &amp; CSS

摘要：每个标签可有一个独立的号。该标签是一个内联元素，与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。前端语言基础：HTML5 & CSS (一) HTML5：超文本标记语言 (1) 基本概念是由一系列成对出现的元素标签（标记）嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现，用于标记文本内容的含义浏览器通过元素标签解析文本内容并...

DevWiki 2019-08-30 15:44 评论0 收藏0
HTML &amp; CSS 之小白再续前缘

摘要：标准文档流的常见现象空白折叠现象。浮动浮动的特点脱离标准文档流，元素一旦脱离标准文档流脱标，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。元素浮动会脱离文档流但是不会脱离文本流，所以会产生字围效果。 CSS 盒子模型（点击查看官方解释）实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 conten...

Heier 2019-08-29 12:51 评论0 收藏0
HTML &amp; CSS 之小白再续前缘

摘要：标准文档流的常见现象空白折叠现象。浮动浮动的特点脱离标准文档流，元素一旦脱离标准文档流脱标，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。元素浮动会脱离文档流但是不会脱离文本流，所以会产生字围效果。 CSS 盒子模型（点击查看官方解释）实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 conten...

taohonghui 2019-08-01 17:04 评论0 收藏0