2020-10-06

    科技2023-09-22  72

    前端学习day4

    盒子的大小

    box-sizing:border-box;

    默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定 box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用) 可选值: content-box 默认值,宽度和高度用来设置内容区的大小 border-box宽度和高度用来设置整个盒子可见框的大小 width和 height 指的是内容区和内边距和边框的总大小


    轮廓阴影和圆角 outline用来设置元素的轮廓线,用法和border一模一样 轮廓和边框不同的点,就是轮廓不会影响到可见框的大小

    outline: 5px red solid;

    box-shadow用来设置元素的阴影效果,阴影不会影响页面布局 第一个值,水平偏移量,设置阴影的水平位置,正值向右移动,负值向左移动 第二个值,垂直偏移量,设置阴影的水平位置,正值向下移动,负值向上移动 第三个值,阴影的模糊半径

    box-shadow: black 5px -5px 10px;

    border-radius:用来设置圆角,数值为圆角半径

    border-radius: 50%;

    浮动基本特点 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性来设置于元素的浮动 可选值: none默认值,元素不浮动 left元素向左浮动 right元素向右浮动 注意,元素设置浮动以后,水平布局的等式便不需要强制成立 元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置, 所以元素下边的还在文档流中的元素会自动向上移动 浮动的特点:

    浮动元素会完全脱离文档流,不再占据文档流中的位置设置浮动以后元素会向父元素的左侧要石侧移动浮动元素默认不会从父元素中移出浮动元素向左或向右移动时,不会超过它前边的其他浮动元素如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移浮动元素不会超过它上边的浮动的兄弟元素,最多最多就是和它一样高
    Processed: 0.013, SQL: 8