css imemode属性 css中item

转载

mob6454cc76bc4a 2024-04-20 18:01:30

文章标签 css imemode属性 css 前端 html 竖向 文章分类 机器学习人工智能

CSS：Cascading Style Sheets 层叠式样式表

原始示例代码：

<div>
    <div>租辆酷车</div>
    <div>css教学</div>
</div>
<div>
    <div>
        <div>中关村到天安门</div>
        <div>价格: 120元</div>
    </div>
    <div>
        <div>陆家嘴到迪士尼</div>
        <div>价格: 50元</div>
    </div>
    <div>
        <div>天河体育中心到广州塔</div>
        <div>价格: 80元</div>
    </div>
</div>

在代码后添加如下片段即可修改所有div元素的字体

<style>
    div{
        font-size: xx-large;
    }
</style>

选择器

element
直接选择全部的元素
如：div，选择所有的div元素
#id
选择某一id的元素
如：#title，选择id为title的元素

css imemode属性 css中item_html

.class
选择包含某个class的部分元素
如：.item，选择class为item的元素（以下三个全选）

css imemode属性 css中item_html_02

.item 选择class包含item的元素（以下三个全选）

css imemode属性 css中item_html_03

同时满足
.item.blue 选择class为item及blue的元素，中间无空格（1和3）
div.blue 选择class为blue的div元素（1和3）

css imemode属性 css中item_html_03

父子关系
中间加上空格
.item div 选择class为item的元素的所有div子元素（不只是第一层儿子是所有的子元素）
.item >div 添加>选择class为item的元素的第一层div子元素

宽高

height/width：设置高度/宽度，可以设置数值也可以设置百分比（相对于父元素大小的百分比，若父元素没有设置高度，则相对于父元素的父元素设置）

宽度默认填满页面，父元素高度默认为子元素高度之和（display: block;）

overflow（当父元素高度小于子元素高度之和时）

hidden：隐藏多余元素
scroll：添加滚动条

缩进

margin：边框到父元素的距离
border：元素的边框宽度
padding：元素到边框的距离

css imemode属性 css中item_css_05

css imemode属性 css中item_前端_06

元素高度 = height + padding-top + padding-bottom + 2 * border（上下两个边框）

元素宽度 = width + padding-left + padding-right + 2 * border

如下示例

margin-left: 50px; 左边界与父元素的距离
border: 2px solid; 元素边界宽度
padding-left: 50px 元素与左边界距离
height: 100px;元素高度
padding-top: 50px; 元素与上边界距离
margin-top: 50px; 上边界与父元素的距离

元素高度为 height + padding-top + 2 * border = 154
元素宽度为 width + padding-left + 2 * border = 510
Ps：这里的width没有设置，是根据子元素得来的

css imemode属性 css中item_竖向_07

box-sizing: border-box
设置之后元素的高度/宽度直接等于height/width
对元素本身的高度进行调整以使得最终高度等于height，默认情况的宽高只针对元素本身，最终宽高还要加上padding和border

位置

top\bottom\left\right 与 position 组合使用

position

relative：原位置不会被顶替，相对于原位置进行位移

css imemode属性 css中item_css imemode属性_08

absolute：原位置会被顶替，相对于页面进行位移，会因为滚动条而滚出页面

css imemode属性 css中item_html_09

fixed：原位置会被顶替，相对于页面进行位移，不会因为滚动条而滚出页面，始终固定在同一位置

css imemode属性 css中item_css imemode属性_10

将父元素设置为position:relative，子元素设置为position:absolute，可以将子元素相对父元素设置

小练习：在陆家嘴到迪士尼的右上角添加一个小方框
在陆家嘴中新建一个div，class设置为star
将陆家嘴position设置为relative
设置star大小和颜色
将star的positon设置为absolute使其飘在上面而不占据空间
将right和top设置为0就移动到右上角了
.item {
border: 2px solid;
position: relative;
}
.star {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
right: 0px;
top: 0px;
}