HTML&CSS拓展（5）

日报

发布日期: 2022-10-20

更新日期: 2023-03-03

文章字数: 690

阅读时长: 3 分

阅读次数:

每日一记

锚点

用a链接跳转到不同区域

<a href="#lianjie">内容</a>

<div id="a">
    内容
</div>

点击a链接时跳到div中去

精灵图(图片整合技术)

1.先将所有图片和为一个图
2.使用background-position来移动位置显示出

宽高自适应

定义:元素自动调整大小
1.定义宽高时为auto，元素的量决定宽高
2.min-height:10px;最小10px，多于10px就变大
问题:父元素不写高度时，子元素写了浮动，父元素会高度塌陷
1.声明
overflow:hidden;
2.浮动元素下加块元素并声明
clear:both; height:0; overflow:hidden;
3.清除浮动
after{content:””,clear:both; display:block; height:0; visibility:hidden;/overflow:hidden;}

伪元素

div::first-letter{          #定义第一个字符的样式
    font-size:30px;
    color:red;
}
div::first-line{}           #定义第一行的样式
div::after{content:内容}    #放在对象后的内容
div::before{content:内容}   #放在对象前的内容

注意(隐藏的区别)

display:none(不占位)
visibility:hidden(占位)

窗口自适应

1.单一栏目
html,body{
    height:100%;             #所有盒子根据窗口的大小变化
}

2.两栏布局
(A)
使用盒子的外边距
<style>
    .box1{
        height:100%;
        ...
        margin-left:200px;     #使一个盒子空出空间(外边距)
    }
    .box2{
        height:100%;
        ...
        float:left;            #另一个盒子往另一边靠
    }
</style>

(B)
使用clac()函数计算长度值
注意:可以使用加减乘除，而且运算符号前后都要加一个空格
<style>
    .box1{
        height:100%;
        width:clac(100% - 200px);     #根据屏幕窗口的变化而改变
        float:left; 
    }
    .box2{
        height:100%;
        width:100px;
         float:left; 
    }
</style>

3.三栏布局
(A)
1.先html,body{}全部统一变化
2.left和right浮动
3.center设置左右外边距
4.先让左右浮动再插入center
(B)
同上，要在center加入clac函数

表单进阶

单选框

<body>
    <div>性别</div>                                        #定义标题
    <div>
        <input type="radio" name="1" id="man">            #radio是选框样式，name是一个组，id表示标记
        <label for="man">男</label>                       #label是说明标签，for是定位到上面的id
    </div>
    <div>
        <input type="radio" name="1" id="woman">
        <label for="woman">女</label>
    </div>
</body>
注意:
1.如果没有定义name(组)会变成多选
2.如果要默认选中，在input中加上checked="checked"，也可以直接写checked