zoukankan      html  css  js  c++  java
  • css基础系列

    css基础系列

    盒子模型

    1. 盒子模型的概念
    2. 高和宽的设置
    3. 边框的设置
    4. 内边距的设置
    5. 外边距的设置
    6. 盒子的计算
    7. 元素显示的方式

    image.png

    盒子模型:

    border边框,margin外边距,padding内部距,content内容,width宽度。

    高度:
    height: 长度值|百分比|auto
    最大高度:
    max-height: 长度值|百分比|auto
    最小高度:
    min-height:长度值|百分比|auto

    image.png

    image.png

    边框的属性:
    边框宽度:border-width
    边框颜色:border-color
    边框样式:border-style

    image.png

    image.png

    边框属性:

    border- left | right | top | bottom -width
    border … -color
    border … -style

    image.png

    image.png

    image.png

    image.png

    image.png

    content+padding = ie

    image.png

    doctype html 声明

    display属性
    inline显示内联元素,元素前后没有换行符
    block显示块级元素,元素前后有换行符

    内联元素使用width和height属性有效。
    inline-block行内块元素。

    ie 盒子模型和标准 w3c 盒子模型

    inline-block 行内块元素,元素呈现为inline,具有block相依特性,none元素不会被显示。

    css文本样式:

    text-align设置元素内文本的水平对齐方式。

    text-align:
    left|right|center|justify

    style=“text-align:left;”

    div{text-align:center;} <div><img src=""/></div>
    

    image.png

    文字基线:

    image.png

    image.png

    line-height属性
    设置元素中文本行高
    语法:
    line-height:长度值|百分比

    浏览器有默认的行高,不同浏览器默认行高不一样。

    word-spacing 设置元素内单词之间的间距
    letter-spacing 设置元素内字母之间的间距

    image.png

    image.png

    image.png

    文字样式:字体,font-family和font-size。

    image.png

    image.png

    文字粗细:
    font-weight:normal|bold|bolder|lighter|100到900

    文字样式:
    font-style:normal|italic|oblique

    水平对齐:
    text-align: left|right|center|justify

    背景,列表

    image.png

    背景图片重复问题:
    设置元素的背景图片重复方式:

    background-repeat: repeat | no-repeat | repeat-x | repeat-y
    

    背景图片显示方式:
    设置元素的背景图片的显示方式:

    background-attachment: scroll | fixed
    

    scroll: 默认值,背景图片随滚动条滚动
    fixed:当页面的其余部分滚动时,背景图片不会移动

    背景图片定位:
    设置元素的背景图片的位置:

    background-position:百分比|值|top|right|bottom|left|center

    image.png

    image.png

    列表:

    image.png

    list-style-position: inside | outside
    

    image.png

    css中的float

    float:left;
    float:right;
    float:none;
    float:inherit;

    浮动变块状元素,浮动能环绕效果。

    image.png

    定位css

    标准流,定位,浮动

    浮动的问题如何解决

    手动给父元素添加高度
    通过clear清除内部和外部浮动
    给父元素添加overfloat属性并结合zoom:1使用
    给父元素添加浮动

    css中的position

    image.png

    css背景与列表

    css背景样式
    background-color:设置元素的背景颜色
    background-image:把图像设置为背景
    background-position:设置背景图像的起始位置
    background-attachment:背景图像是否固定或者随着页面的其余部分滚动
    background-repeat:设置背景图像是否重复以及如何重复
    background:背景属性设置

    css列表样式

    list-style-type:设置列表项标志的类型
    list-style-image:将图像设置为列表项标志
    list-style-position:设置列表中列表项标志的位置
    list-style:简写

    背景样式
    设置背景颜色和背景图片

    背景颜色,设置元素的背景颜色

    background-color:颜色 | transparent
    背景图片
    设置元素的背景图片
    background-image: url | none

    背景图片重复
    background-repeat: repeat | no-repeat | repeat-x | repeat-y

    背景图片显示的方式
    设置元素的背景图片的显示方式
    background-attachment: scroll | fixed

    scroll:随着滚动条滚动,fixed:背景图片不会移动

    背景图片定位
    background-position: 百分比 | 值 | top | right | bottom | left | center

    background: background-color background-image background-repeat background-attachment background-postion

    列表项,list-style-type:关键字 | none
    list-style-image: url | none
    list-style-position : inside | outside

    list-style: list-style-type list-style-position list-style-image

    div, ul, li, dl, dt, dd, img

    html,css,javascript关系

    html是网页内容的载体,css样式是表现,javascript是行为。

    css优先级
    行内样式>内部>外部

    css选择器
    标签选择器,全局选择器,类选择器,群组选择器,id选择器,后代选择器

    群组选择器
    image.png

    image.png

    链接伪类
    :link 未访问
    :visited 已经访问
    :hover 鼠标悬停
    :active 激活

    css继承和层叠

    从父元素那继承部分css属性
    css层叠可以定义多个样式

    选择器的权重

    标签选择器1
    类和伪类10
    id选择器100

    通配符0
    行内样式1000

    image.png

    这种声明高

    image.png

    id不要滥用,适当使用class

    css导入式@import 外部css样式

    css字体和文本样式

    文字:字体,字体大小,颜色,加粗等
    文本:行高,对齐方式,文本修饰等

    字体:font-family
    文字大小:font-size
    文字颜色:font-color
    文字粗细:font-weight
    文字样式:font-style: normal | italic | oblique

    水平对齐:
    text-align: left | right | center | justify

    css中的浮动

    float: left | right | none | inherit 继承

    css中的position

    position: static | relative | absolute | fixed | inherit

    使用z-index要有position: absolute

    盒子模型:
    盒子模型概念,内边距设置,高和宽的设置,边框的设置,外边距设置,盒子的计算,元素显示的方式。

    border- thin | medium | thick
    border-color: 颜色 | transparent

    display: inline | block | inline-block | none

    结言

    好了,欢迎在留言区留言,与大家分享你的经验和心得。

    感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

    作者简介

    达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。

    感谢!承蒙关照!您真诚的赞赏是我前进的最大动力!

    这是一个有质量,有态度的公众号

    喜欢本文的朋友们

    欢迎长按下图关注订阅号

    收看更多精彩内容

    image

    image

  • 相关阅读:
    OSPF
    【今日CS 视觉论文速览】 24 Jan 2019
    【今日CS 视觉论文速览】Wed, 23 Jan 2019
    【今日CS 视觉论文速览】 21 Jan 2019
    【Processing学习笔记】安装与入门
    【今日CS 视觉论文速览】Part2, 18 Jan 2019
    【今日CS 视觉论文速览】Fri, 18 Jan 2019
    【今日CS 视觉论文速览】Thu, 17 Jan 2019
    【今日CS 视觉论文速览】Part2, 16 Jan 2019
    【今日CS 视觉论文速览】Wed, 16 Jan 2019
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140296.html
Copyright © 2011-2022 走看看