css重置样式\position 定位\Flash和marquee(滚动字幕)

前端 专栏收录该内容
30 篇文章 0 订阅

CSS 基础 笔记

Author : 朱盟 |吃火星的宝宝
TIME: 2019/6/1 学习的第6天
GIT HUB : embaobao https://github.com/embaobao/EM
Email: 1132067567@qq.com
CSDN: https://blog.csdn.net/embaobao
博客园: https://www.cnblogs.com/embaobao/

学习记录 [] 为有padding margin
块 body[] div,p[] ,h1 ,ul [, li, ol[], dl[], dt ,dd ,table[] thead tbody tfoot th[] tr td[] caption form fieldset[] legend[] hr[]

内联 em i b strong u del s sup sub br img span a input[] select option[] textarea[] button[] lable

重置样式

body,p,fieldset,legend,option,th,td,th,input,hr,button,ol,ul,dl,dd{margin:0px;padding:0px;}
/*清除默认间距 性能高与 *{margin: 0;padding: 0;  }*/
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal;} /* 清除加粗效果 */
li{list-style:none;}/*清除列表图标*/
a{text-decoration:none;color:#666;}/*清除a标签下划线 字体颜色*/
i,em{font-style:normal;}/* 清除倾斜效果 */
img{border:none;display:block;}/*清除IE A 标签下图片有默认边框 和转化元素类型清除图片之间的间隙*/
input{outline:none;}/* 清除input 浏览器的有的蓝色有边框的效果 */
body{font-family:"微软雅黑'";font-size:14px; color:#666;line-height:1em ; }
/*清除有默认行高 字体 字体颜色*/
table{border-spacing:0px; /*调整相同的单元格之间的边距*/}
a:hover{text-decoration:underline} /* 标签下划线 */

标准盒子模型
margin border padding content
IE 的怪异盒子模型
在不加 <!doctype html>
IE8 以下 border |padding|都不会影响盒子的大小
组成盒子的大小由 margin+content ;
如果我想让其他浏览器都按照怪盒子来解析怎么办了?


{box-sizing:content-box;}
/* 盒子模型的标准的规则解析
盒子的大小 会受到边框和内填充的大小影响(相加)
 
 !此样式只能在IE8 和IE8 以上的浏览器
*/
{box-sizing:border-box;}
/* 盒子宽高包括了边框 、padding,当增加边框 和内填充的时候 他会自动缩小内容区域 ,但是有前提哦!!!
!!!当盒子大小容纳不下填充时 填充就会改变盒子的大小。
但你的能力(content)装不下你的野心(padding+border)的时候 ,那就对不起了,野心会撑到你!^_^
 */

tip: input 中的(只有按钮) 默认是用怪盒子来解析的.
定位也可以实现居中
父元素 relative
本身absolute 利用 上、下50%
再用margin调整

最简单的方法是

父元素 relative
本身absolute
本身 拥有宽度高度
然后 本身
left:0 ;
top:0;
right:0;
bottom:0;
margin:auto;

学习目标

  1. position 定位属性和属性值
  2. 定位元素的层级属性
  3. 包含块的概念和应用
  4. 锚点连接的语法和应用场景
  5. 透明属性的应用
  6. 扩展:Flash和marquee(滚动字幕)

1. position 定位属性

  • 怎么实现层叠了?

position: static /absolute/relative/fixed/inherit/sticky/unset(未设置是inherit和initial的结合)/initial(最初的,初始的)

取值含义 :

  1. static:默认值,无特殊定位,对象遵循HTML原则;

  2. absolute:绝对定位,将对象从文档流中完全拖离出来,使用left/right/top/bottom等属性相对齐最接近的一个并有定位设置的元素。
    父元素进行绝对定位;如果不存在这样的父对象,则依据《浏览器》进行定位,而其层叠通过z-index属性定义

    self_note:

    1. 定位不设置位置值,那么值就还是以前占位子的的位置值,(不设置不变)
      不占位置
    2. 父元素没有定位设置(也就还是默认值:static),那就去找最近的上一级(爷爷)等…到body还没有设置那就是浏览器的窗口来做参照物了。
    3. 如果位置相同 后面来的元素会在前面的元素上面(后来者居上)
    4. 如果先让谁上设置属性(z-index:)这个属性比大小,谁大谁上。
    5. z-index 一般是同级比较的,如果他的爸爸没设置z-index 那还可能跑他爸爸下面 ,当然他是-1什么的.但是他爸爸如果设置了 z-index ,那么他就没机会了,就没法待在他爸爸下面了。
  3. relative :相对定位遵循正常的文档流,将依据right,top,left,bottom(相对定位)等属性在正常文档流中相对自身位置进行偏移;其层叠通过z-index属性定义.

    self_note:相对于自己定位 ,还要占个位子给自己(正常文档流)。

  4. fixed:(固定定位),类似于绝对定位的方式,但是它的参照物是浏览器的“可视”窗口,且脱离标准文档流;

    self_note: 参照物总是可视窗口。
    脱离文档流,不占位。

  5. inherit:规定元素的定位方式继承父元素的position的属性值。

  6. sticky:(粘性定位)
    粘性定位,该定位是相对定位和固定定位的结合,在跨越特定阈值前类似相对定位,之后类似固定定位。

    self_note:
    粘性定位(CSS3 NEW)
    在没设置值是没效果的
    不会文档流,在设置后页面再没有到达他所设置的值时会和absolute定位一样
    当滚动条滚动到他设置的值时就会固定到屏幕上。

  7. unset(未设置,是inherit和initial的结合)
    当当前属性有继承性时,他解析的是继承(inherit)所得来的属性值 ,如果当前属性没有继承,解析的是初始(initial)值。

    self_note:

!注:任何元素设置过脱离文档流的定位方式时,就有了块元素的显示特性





↓ SECTION 2



2. 定位元素的层级属性


z-index : auto |number 设置定位对象的层叠顺序。


取值含义 :

  1. auto:默认值。遵循结构,后写的定位元素层的顺序靠上。

  2. number:无单位的整数值。可为负数,数值越大,层的顺序越靠上

    说明:
    此属性仅仅作用于 position 属性值 relative 或 absolute,fixed ,sticky的对象。

    _self note





↓ SECTION 3



3. 包含块的概念及作用

包含块是什么?


包含块是绝对定位的基础

包含块就是为绝对定位元素提供坐标,
偏移和显示范围的 参照物
即确定绝对定位的偏移起点和百分比

_self note


长度的参考

默认状态下,浏览器是一个大的包含块,所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的,如果我们定义了包含元素为包含元素块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块:给绝对定位元素的父元素添加声明

position:relative;

如果我们的父素设置了position:absolute;
那么子元素也会相对父元素来定义自己的位置。

绝对和相对定位的区别

  1. 参照物不同, 绝对定位 (absolute)
    参照物是包含块(父级)
    相对定位(reletive) 的参照物是 元素本身 位置

    _self note 绝对的定位 我(元素)绝对定位,就是找到爸爸 定位我绝对的自己。
    _self note 相对定位 我(元素)跟自己相比找到我自己。

  2. 绝对定位将对象从文档流中拖离出来
    因此不占据空间,
    相对定位不破坏正常的文档流
    顺序无论是否进行移动,元素仍然占据原来的空间。

    _self note





↓ SECTION 4



4. 锚点连接的语法和应用场景

锚点的作用:在同一页面内的不同位置进行跳转。


###锚点链接语法:

  1. 给元素定义命名锚记名

    语法:

<标记 id="命名锚记名"> </标记>
  1. 命名锚记连接
    语法:
<a href="#命名锚记名称">链接文本或图片</a>




↓ SECTION 5



5. 透明写法

filter:alpha(opacity=value);
取值范围 0-100 (!IE9以下浏览器写法)

opacity:0.5;
(value的取值范围0-1 0.1,0.2,0.3-----0.9—1)
rgba(255,255,255,0.5)
(最后一位值表示透明,取值范围0-1) 兼容其他浏览器写法 !只支持IE8以上的浏览器





↓ SECTION 6



6. Flash和marquee(滚动字幕)

  1. 插入flash

语法:

<object>
<embed width="value" height="value" wmode="transparent" src="flash路径及全称"  ></embed>
</object> 
  1. 将flash背景设置为透明
<embed wmode="transparent" /> 
给<embed>标记添加属性:wmode="transparent"
说明:flash源文件格式.fla, 
导出影片为.swf, 
创建播放器格式为.exe. 

  1. IE中不显示flash,
    可做如下操作:
    A.下载安装flash player;
    B.打开IE浏览器,选择工具菜单–Internet选项----安全----低。

2、滚动字幕的应用:

behavior(行为)=“scroll(滚动)/alternate(晃动)” direction(方向)=“up(从下向上)/down(从上向下)/left(从右向左)/right(从左向右)”
scrollamount(滚动速度)=“value” height=“value(上下滚动范围)” width=""(左右滚动范围)>
内容

八、 CSS继承
概念:所谓继承,就是父元素的规则也会适用于子元素。继承得来的规则没有特殊性(权重)。
比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置,也都会变成红色。
所有元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration、text-transform.
块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。

九、CSS层叠
概念:一个元素可能同时被多个css选择器或样式表选中,每个选择器及样式表都有一些css规则,这就是层叠。
这些规则有可能不矛盾的,自然这些规则将会同时起效,然而有些规则是相互冲突的。当发生冲突的时候必须选出一条最高特殊性(权重)的规则来应用。

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

embaobao

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值