文档流

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

流动方向

  • 内联元素从左往右流，宽度不够，之字形，且元素会被截断
  • 块元素从上往下流动，一排一排

注意事项

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

  • 若想打断上述联结，请使用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; 来使元素充满<body>
absolute    可以设置子元素 position: absolute;

                   父元素position: elative;

            子元素相对父元素绝对定位

子元素居中

  • 水平居中

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

  • 垂直居中

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

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

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

    <div>
    
    <span></span>
    
</div>

div{
    
    text-align: center;
    
}

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

    <div>
    
    <span></span>
    
</div>

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/，添加网站生成的<svg>到 html 里

  • 给<svg>添加 css属性改变样式

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

其它

  • 鼠标悬停

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

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

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

css碎碎念

  • <a>标签去掉列表下划线

    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里再表示下元素的大小，用来确认

文档流&文字&CSS常用命令的更多相关文章

  1. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  2. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. CSS文档流与块级元素和内联元素（文档）

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  4. 从文档流来看内联元素和块元素的css排版

    veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...

  5. css标准文档流

    css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...

  6. CSS文档流、块级元素、内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  7. 前端基础-CSS如何布局以及文档流

    一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...

  8. 前端css盒模型及标准文档流及浮动问题

    1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...

  9. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

随机推荐

  1. [转帖]深度解析区块链POW和POS的区别

    深度解析区块链POW和POS的区别 Proof of Work 还有Proof of Stake 之前理解程了 state ... 股权的意思 还有 delegated proof of Stake ...

  2. spring boot 整合activemq

    1 Spring Boot与ActiveMQ整合 1.1使用内嵌服务 (1)在pom.xml中引入ActiveMQ起步依赖 <properties> <spring.version& ...

  3. Requests的基本使用

    Requests库 r=requests.get(url) #返回一个包含服务器资源的Response对象 #构造一个向服务器请求资源的Request对象 格式:requests.get(url,pa ...

  4. Codeforces 1262E Arson In Berland Forest（二维前缀和+二维差分+二分）

     题意是需要求最大的扩散时间,最后输出的是一开始的火源点,那么我们比较容易想到的是二分找最大值,但是我们在这满足这样的点的时候可以发现,在当前扩散时间k下,以这个点为中心的(2k+1)2的正方形块内必 ...

  5. Python中函数传递参数有四种形式

    Python中函数传递参数有四种形式 fun1(a,b,c) fun2(a=1,b=2,c=3) fun3(*args) fun4(**kargs) 四种中最常见是前两种,基本上一般点的教程都会涉及, ...

  6. 探索ASP.Net Core 3.0系列二：聊聊ASP.Net Core 3.0 中的Startup.cs

    原文:探索ASP.Net Core 3.0系列二:聊聊ASP.Net Core 3.0 中的Startup.cs 前言:.NET Core 3.0 SDK包含比以前版本更多的现成模板. 在本文中,我将 ...

  7. Ruby下安装cocoapods

    常规安装:(文末:特殊安装) 注: 1.Mac OS X EI Capitan 10.11中需要更改安装路劲: sudo gem install -n /usr/local/bin cocoapods ...

  8. 免费申请 QQ 免费靓号

    打开网址:https://ssl.zc.qq.com/v3/index-chs.html?type=3 说明:靓号一般分为 9位靓号 or 带有寓意的号码 激活规则:获取的"靓号" ...

  9. Eclipse开发工具的编码问题

    乱码:文件有一个编码,打开文件的工具(Eclipse或者浏览器)有一个编码,当两个编码不同就会出现编码异常或乱码. 参考: Eclipse修改编码格式 背景:在Eclipse的开发使用中,我们经常使用 ...

  10. Ubuntu Text editor文本编辑器相关设置

    刚开始不熟悉Ubuntu,设置个文本编辑界面都难找到: 打开后在顶上的导航栏,下拉框内有preferences: 里面可以设置视图.字体颜色等