• CSS基础知识


    div HTML 标签
    | ----------①行内元素(内联元素)
    | ----------②块级元素
    | ----------③行内块级元素
    块级元素(默认100%宽度(浏览器显示区域),独占一行,垂直排列,里能用行内元素,可以设置宽高):
    |-->div 没有任何CSS属性(主要用在大框架)
    |-->p 自带上下外边据 (用在段落)
    |-->h1-h6 自带上下外边据,自带字体大小(用在栏目大标题)
    |-->ul li 自带上下外边据,li自带圆点 (用在列表,多个元素大小一致)
    |-->dl dt dd 用在带标题的列表上
     
    行内元素(默认宽度只有本身所占的宽度,默认水平排列,不支持宽高 ,margin padding 左右有效果 上下没有效果):
    |-->a 超链接 <a href="http://www.baidu.com" target="_blank">我是A标签</a> 自带标签颜色、鼠标放上颜色,点击时的颜色,点击过颜色,下划线
    |--> span
    |-->em、i(默认斜体)
    |-->strong,b(默认加粗)
    |-->u(默认下划线)
     
    行内块级元素(默认宽度只有本身所占的宽度,默认水平排列,支持宽高,受到父级text-align影响,可以居中):
    |-->img 图片 <img src="http://xxx.com/1/jpg" width="500" height="200" />
    |-->input 输入框
    |-->select 下拉菜单
    |-->textarea 输入区域
     
    IE6----------------BUG----------------------
    块级元素转化成行内块级元素 IE6不支持
    行内元素转化成行内块级元素 IE6支持
     
     
    块级元素加上position:absolute fixed(定位)或者浮动 宽度不是100% 是本身内容的宽度
    行内元素加上position:absolute fixed(定位)或者浮动 就会变成块级元素
     
    css属性
    | ----------①盒子模型:width、height,padding、border、margin
    注意事项:padding 上下左右 全部相加 margin 上下取最大 左右相加 margin-top如想父级元素不受影响,父级元素要加overflow:hidden
     
    | ----------②-1 背景相关:background背景缩写、background-color、background-image、background-position、background-repeat
    | ----------②-2 文本样式:font-size文字大小、color文本颜色、line-height行高、text-align水平位置、font-family文字字体、letter-spacing文字间隔、text-decoration文本样式
    | ----------②-3 UL li:list-style列表样式
    | ----------②-4 A链接:a{}
    a:link - 普通的、未被访问的链接
    a:visited - 用户已访问的链接
    a:hover - 鼠标指针位于链接的上方
    a:active - 链接被点击的时刻
    | ----------③选择器 style 优先级最高 | ID选择器 #xxx id="xxx" | 类选择器 .xxx class="xxx" | 元素选择器 p | 后代选择器 .xxx .yyy
    | ----------④定位 float(浮动) position(定位):relative(相对)absolute(绝对)fixed(相对浏览器固定)
     
    元素加上浮动float后的影响:
    1.宽度改变:该元素宽度变成设置的宽度,如果无则是内部元素所占的宽度 可以加宽度修复,也可以不加,就使用自身内容大小
    2.父级元素受影响:该元素脱离文档流,使父级元素高度消失,在父级元素上加overflow:hidden 或 加height 来修复父级元素的高度
    3.同级不加浮动的元素受影响:正常没加浮动的文档流元素,会无视该浮动元素 在没加浮动的元素上加 clear:both 来修复该元素上面浮动元素所占的高度
    4.元素类型改变:元素加了浮动,就变成了块级元素
     
    2.定位
     
    1.父级设置(相对定位)relative - 子级设置(绝对定位) absolute 必须加 left(right) top(bottom)
    2. 固定定位 position:fixed
     
    元素加上absolute和fixed后的影响:
    1.宽度改变:该元素宽度变成设置的宽度,如果无则是内部元素所占的宽度 可以加宽度修复,也可以不加,就使用自身内容大小
    2.元素类型改变:变成块级元素
    3.文档流影响:元素完全脱离文档流,同级的定位,后写的在上层,可以通过z-index 解决层级
     
    常用的css:
    cursor: pointer; 鼠标手型
    display:none 隐藏元素
    letter-spacing定义了字与字之间的距离.
    word-spacing单词的间距.
    z-index:层级 只在position:absolute fixed
    opacity:0 - 1 半透明 filter:alpha(opacity=50); [兼容IE]
     
     
     
     
     
     
     
     
    --------切图规范------------------------------------------
     
    1.专家、康复案例、幻灯片 等小于1000px的图片 能用插图就插图
    2.ico小图标、切换需要变换的图等 一般用背景图
     
    --------模块写法------------------------------------------
     
    1.模块最外层必须加上高度和overflow:hidden 防止影响到下个模块
     
    2.模块内子模块(子级第一个子模块)高度可以是100%,也可以不加高度,高度用最终的小模块撑起来
    |——子模块内部的小模块需要加上高度和间距等
     
    3.模块内子模块(子级第一个子模块)的宽度必须加,浮动方法为 左左左左....右
    |——子模块内部的小模块不需要加宽度,一般都是100%
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    电脑发朋友圈神器?不是严格意义上的
    微信公众平台投票功能升级 可多渠道发布投票
    多客服功能终于也向所有微信认证的订阅号开放了
    微信电脑版-微信for windows客户端发布
    微信朋友圈广告的赢家是他们
    微信公众平台原创声明功能公测 自媒体原创保护的福音
    微信公众平台数据接口正式对所有认证公众号开放
    壕,微信6.1版发微信红包更方便了,我们去喝杯茶吧
    微信公开课发布微信官方教程:教你用好微信JS-SDK接口
    微信公众平台开放JS-SDK(微信内网页开发工具包)
  • 原文地址:https://www.cnblogs.com/zhq--blog/p/8213754.html
Copyright © 2020-2023  润新知