• 高级选择器~伪类~基础样式~盒模型~浮点布局


    """
    1、高级选择器:
    1) body div 后代,控制后者,前面都是修饰
    2) body > div 子代,控制后者,前面都是修饰
    3).d1 ~ .d2 兄弟,控制后者,前面都是修饰
    4).d1 + .d2 相邻,控制后者,前面都是修饰
    5).d1, .d2, body div 群组选择器,控制多个
    6)div#div.div 交叉选择器
    7)div:nth-child(3n - 1) 先找位置再匹配选择器
    8)div:nth-of-type(3n - 1) 先匹配选择器再确定位置
    9)[id] [class='d1'] [owen^='o'] [owen*='a'] 属性选择器

    2、a的四大伪类
    :link 初始
    :hover 悬浮,可以运用到一般的标签 cursor:None 没有效果
    :active 激活,可以运用到一般的标签
    :visited 访问过
    text-decoration:none-------下划线无
    不能让文本被复制:user-select:None
    圆角: border-radius:5px

    3、基础样式
    1)字体
    font: bold 20px/30px '新宋体’, '微软雅黑';
    color: red;
    font-size:大小
    font-family:字族
    font-weight: lighter | normal | bolder字重
    font-style:样式(不常用)
    text-decoration:underline 下划线
    line-through中划线
    overline 上划线 默认为none
    text-align: center;|left |right
    line-hegiht: 行高
    text-indent:首行缩进
    letter-spacing:字间距
    2)背景图片
    background-image:url()
    1显示比屏幕大的图片--缩放尺寸
    background-size: 显示的和图片大小基本要一致1:1
    尽量只设置宽,高等比缩放 不会失真
    2显示比屏幕小的图片--处理平铺
    backfround-image:url()
    background-repeat:repeat-x | repeat-y | no-repeat |repeat
    只设置x轴,y轴默认center
    x轴:left center right 具体像素 百分比
    y轴:top center bottom 具体像素 百分比
    background-position: left top 左上| left bottom 左下|left center
    background-position:center center 居中

    精灵图案例:资源整合,降低io
    
    3)边界圆角
    	border-radius: (固定的值 或者百分比)
    	四个角-->按照顺时针方向转动 左上问第一个角
    	若不足 找对角
    	横纵分离  先横后纵
        border-radius:50px/50%
    	
    4)显示方式
    	inline:不支持设置宽高,不带换行,宽高只能有文本撑开 只能由文本撑开,一行显示不下会自动换行,保留数据的整体性,数字字母 异于 文本  
    	inline-block:支持设置宽高,一行显示不下的话不会自动换行(以标签整体换行,标签整体之间有间隙) ----------不好用
    	block:换行显示原理  支持设置宽高,自带换行
    

    4、盒模型
    广义上任何一个标签都有盒模型
    组成:margin + border + padding + content
    content: width x height ,作为内容或子标签的显示区域
    padding: 上右下左----内边距,没有自身颜色,完成内容的内移(保证显示区域大小不变,可以相应减小content)
    border: 1px solid black; | border-bottom: 1px solid black;
    宽度,样式(none dashed,solid,dotted-点状线),颜色(transparent-自身透明,透出背景颜色)
    border: 10px orange solid;(顺序可调)
    margin: 控制盒子显示位置,left 和top 控制自身,bottom 和right控制兄弟
    注:margin的偏移依据当前所在位置
    上右下左 | margin: 0 auto

    5、浮动布局---(父级的宽度不固定时高度不能设置死)--采用请浮动

    				就是在自己宽度是否确定下,保证父级的高度刚刚好包裹好子集
    子集浮动参照父级宽度
    子集浮动不在撑开父级高度
    父级的高度需要子集处理,否则影响兄弟布局
    float: left | right
    
    :after {
    	content: '';
    	display: block;
    	clear: both;
    }
    

    快速实现水平居中 margin:0 auto

    盒模型:margin,padding协调操作,上下位置能用padding尽量用padding,在考虑margin
    浮动:需要左右排列的block采用浮动布局,且父级一定要清浮动

  • 相关阅读:
    iOS CALayer 学习(2)
    iOS CALayer 学习(1)
    iOS 绘画学习(5)
    iOS 绘画学习(4)
    果冻视图制作教程
    15个名不见经传的Unix命令
    WEB服务器2--IIS架构(转)
    WEB服务器1--开篇
    HTTP协议5之代理--转
    HTTP协议4之缓存--转
  • 原文地址:https://www.cnblogs.com/zhuyuanying123--/p/11278576.html
Copyright © 2020-2023  润新知