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

文档流

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

流动方向

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

注意事项

  • 内联元素中有英文单词,流动时宽度不够,英文单词会整体迁移,不会被打断
  • 若想打断上述联结,请使用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;
    不过支持paddingmargin,可以用来代替
  • 为防止在不同电脑上效果不一致,可以在css里再表示下元素的大小,用来确认

原文地址:https://www.cnblogs.com/homehtml/p/11965515.html

时间: 2024-10-10 11:19:25

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

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

01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&

前端学习随笔:float布局问题------float元素是否脱离了文档流

问题: 今天学习2016-03-13,我知道float的原始作用为实现文字的环绕效果,但是老师说:对元素设置float属性后,该元素依然处于标准文档流中,同时浮动会 引起父元素的高度塌陷问题(怎么解决,目前不知道).但是,紧随其后的块元素会无视设置float属性的元素,但是后面元素的文本依然会为float元素让出位置,环绕于周围.既然后元素没有按照标准文档流单独占一行,我是不是可以理解为浮动的元素脱离了文档流??前后矛盾了. 解答:回答这个问题之前,首先解释一下什么叫脱离文档流! css中脱离文

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

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流 将窗

关于css浮动框是否脱离文档流的分析

在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. 常见的html标签中如 span, font, a, b, em 都是内联元素. 所谓内联,简单理解就是不会换行的元素. <body> <b>bold element</b> <a href="http://www.google.com">g

CSS文档流

文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧.文字内容会围绕在浮

CSS定位机制Ⅰ——文档流定位

关于CSS的定位机制Ⅰ ㈠概念 对于盒子模型来说,也就是页面元素,这些盒子究竟在页面的什么位置,怎样排列它,那么找到它的位置,确定它的位置,这个就是定位机制所决定的. ㈡分类 文档流, 浮动定位,层定位 ㈢三种类型定位的功能 ⑴文档流定位(flow)   默认 我们不需要额外的设置,每种元素它们在当前的网页上面呈现出来的状态都不同,文档流定位就相当于我们平常写字一样,都是从上到下,从左到右,只是有的元素会单独占一行,有的元素跟其他元素在一行上显示. ⑵浮动定位(float) 改变默认的文档流定位

CSS总结篇—熟悉而陌生的文档流

文档流 我相信,在大家刚学css的时候,一定对这个名词熟悉而又陌生.在查阅了相关资料后,总结了下对文档流的认识. 文档流定义:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流 每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动.内联元素也不会独有一行. 一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素.有三种状况将使得元素离开文档流而存在,分别是浮动.绝对定位.固定定位.然则在IE中浮动元素也存在于文档流

css 文档流中块级非替换元素水平区域的计算规则(1)

最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的时候,虽然凭感觉能猜出个大概,但是总是有点不是很靠谱.直到最近看到这一本书,觉得总觉得挺好的. 首先要知道,元素除了通过display来指定block.inline.inline-block这一些属性之外,还有一种能在的特性--替换还是非替换. 替换元素:像img.video.canvas等稳定种指定的内容只

CSS中脱离文档流是什么意思?

如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?我用js取这个元素的父节点的childNodes还能否取到这个元素:同时,这个元素的parentNode还是不是html中的父节点? 脱离文档流只是对html文档的一种解析方案的说法而已.脱离文档流是相对正常文档流而言的.正常文档流就是我们没有用css样式去控制的html文档结构,你写的界面的顺序就是网页展示的顺序.比如写了5个div块.正常文档流就是依次显示这5个div块.从左往右,自上而下的顺序.脱离文档流就是指它