美文网首页
初识HTML(2)

初识HTML(2)

作者: __拼搏__ | 来源:发表于2022-01-21 15:34 被阅读0次

    position属性

    absolute绝对定位。
    1.脱离原来位置进行定位。
    2..每个absolute都是一个独立的层。
    3.可以使用top bottom left right 进行定位。
    relative相对定位。
    1.保留原来位置进行定位。(相当于原位置依然有元素,但元素变为不可见,而新位置也有一个该元素,但元素可见)
    3.可以使用top left right 进行定位。

    absolute定位的元素,会一层一层的向上找父元素,有没有absolute或者relative。如果找到了,就以该元素为参考元素进行定位。如果没有找到,就以浏览器为参考进行定位。

    可以使用relative做坐标系,使用absolute进行定位。

    fixed:固定定位。
    相当浏览器窗口,不会改变位置。

    box-sizing

    box-sizing默认是content-box。实际开发中应改成border-box。意思是,如果设置了width:100,那border+margin+padding+content的总值,就是100``。如果用content-box,只有```content会是100一般设置在通配符里

    背景色

    rgba(0, 0, 0, 0)
    opacity: 0
    这两个都能给元素设置透明度。rgba只会改变背景色,不会改变文字的透明度。opcity是把背景色与文字颜色一起变透明

    百分比的问题。

    1.普通元素的百分比,参考是父元素的content大小。
    2.绝对定位元素的百分比,参考是父元素中,第一个绝对定位的padding+content

    width
    height(因为参考系本身受该元素影响,所以设置无效)
    padding 
    border
    marging
    

    设置百分比后,参考的都是参考系的content的宽度

    最大最小宽高

    max-width min-height等等
    当一个元素尺寸会自动变化时,可以设置该属性,不至于让他变的过大过小。
    1.例如浏览器的窗口,就是能手动设置大小的。给自己的页面设置min-width后,就不会再缩的更小了。
    2.一般给图片设置max-width。可以防止图片大小超过容器。
    当然也可以直接witdh:100%

    textArea

    不让用户拖动文本框:

    resize: none
    

    这是css3的属性。

    both 默认值。上下左右都可以拖动。
    horizontal:用户可以调节元素的宽度;
    vertical:让用户可以调节元素的高度;
    

    伪类(部分):

    元素 作用
    :focus 聚焦用于文本输入框。
    :hover 当鼠标移动到该元素上。
    :disable 禁用。
    :checked 单选或者多选被选中的状态。

    伪元素(部分):

    元素 作用
    ::placeholder 对输入框有效。
    ::after 在结尾追加元素。

    解决高度坍塌:

    1:添加属性:overflow:hidden;

    2:在float元素后,添加一个元素。例如<span> display :block clear :both即可。
    一般稍微封装一下:

       .clearfix::after {
         clear: both;
         display: block;
         content: '';
       }
    

    之后就可以直接使用clearfix了。

    解决不在图标文字不在同一行的问题:

    vertical-align:

    select属性多选:

    multiple

    label

    label与某元素绑定,可以用for属性直接绑定该元素的id

      <input type="radio" name="sex" id="woman">
      <label for="woman">女</label>
    

    outline外边框

    外边框。不包含盒子尺寸,可以自由调试后删除,不影响代码的效果。border就不行。用法与border一致。

    outline: 1px solid red
    

    background-position:

    说明
    background-position 指定背景图像的位置
    background-position: 200px 200px; 
    

    属性计算过程:

    1. 确定声明值

    参考样式表中没有冲突的声明,作为css属性值。

    1. 层叠冲突

    对样式表中有冲突的声明按顺序使用层叠规则:
    -. 比较重要性:作者样式表覆盖浏览器样式表。
    -. 比较特殊性:比较权重。
    -. 比较源次序:谁写后边用谁。

    1. 使用继承。对依然没有值的属性,若可以使用继承,则继承父元素。
    2. 使用默认值。

    如果对某属性添加inherit值,相当于直接调用super方法。会立即当前属性设为父元素的的值。

    a标签伪类的使用顺序:

    1. a:link
    2. a:visited
    3. a:hover
    4. a:active

    相关文章

      网友评论

          本文标题:初识HTML(2)

          本文链接:https://www.haomeiwen.com/subject/wuiehrtx.html