当前位置：首页 > article >正文

HTML CSS H5C3样式语句汇总20241105

article 2024/11/15 23:26:38

样式语句汇总：

----------------------------------样式设置------------------------------------
盒子：
border: 1px solid #000;  设置边框粗细、实线、颜色；
margin: 0 auto;  盒子居中（顺时针）上0、右自适、下0、左自适；
border-top-left-radius: 50%; 设置圆角；
display: flex;弹性盒子；父盒子加该属性；
	align-items:center; 弹性盒子的垂直居中，给父盒子加该属性
	justify-content: center; 弹性盒子的水平居中，给父盒子加该属性
	justify-content: space-around; 均分布局，给父盒子加该属性，子盒子在一行显示，并两边留空，给父盒子加该属性
	justify-content: space-between; 两端贴边、均匀布局，第一个子项在容器的起始位置，最后一个子项在容器的结束位置，给父盒子加该属性。
	flex-wrap: wrap; 在一行显示的子盒子换行，常与justify-content: space-around; 均分布局搭配使用
    flex-direction: row; 现代浏览器的 Flexbox 水平排列子元素
/*让子盒子在父盒子中垂直居中:*/
1.
父盒子：
display: flex;/*Flexbox 布局*/
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 父盒子的高度 */
2.
父盒子：
display: grid; /*使用 Grid 布局*/
 	place-items: center; /* 将子元素在网格中居中 */
 	height: 300px; /* 父盒子的高度 */
3.
父盒子加：（实用：子盒子浮在父盒子上面的某个具体位置）
position: relative; /*使用定位（相对定位和绝对定位）*/
	height: 300px; /* 父盒子的高度 */
子盒子加：
  		position: absolute;
  		top: 50%;
  		left: 50%;
  		bottom: 0; /* 距离父盒子底部0 */
  		right: 0; /* 距离父盒子右侧0 */
  		transform: translate(-50%, -50%);



背景图片：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
background: transparent url(imges.jpg) repeat-y fixed top;
background-size: contain; 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小;
background-size:cover;  此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小;
color: #008B8B; 设置背景颜色; 
image: url(./timg.jpg); 设置背景图片;
size: 50px 50px;  设置背景图片的大小；
repeat: no-repeat; 设置背景图片是否重复；
position: center;  设置背景图片的位置；
position: fixed; 元素也会保持在相同的位置，不会随着页面的滚动而移动
position: fixed;left: 0;bottom: 0; 固定在浏览器左下角
background-attachment: fixed; 设置背景图片相对浏览器的定位位置；
fixed： 背景图像相对于视口（viewport）固定；scroll： 背景图像相对于元素固定； local： 背景图像相对于元素内容固定；
float: left; 解决图片间隙；父盒子使用display:flex;弹性盒子时，子盒子添加浮动

文字：
color: red; 设置文字颜色
font-size: 15px; 字体大小
text-align: "center";  文本水平居中；
line-height: 50px;  文本垂直居中方式1；
display: flex; 文本垂直居中方式2；/* 创建 Flexbox 容器 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        height: 200px; /* 设置容器高度 */
        border: 1px solid #ccc; /* 为了便于观察，添加边框 */
text-decoration: none;  去掉下划线；
list-style: none;  去掉列表前的小圆点；
display:inline-block; 让列表内容显示在同一行；
font-weight:bold;  字体加粗；
white-space: nowrap; 超出不换行；/* 超出一行显示省略号  normal允许换行*/
	overflow: hidden; 超出范围不显示（溢出隐藏）;
	text-overflow: ellipsis; 超出的文本显示省略号；

/*多行文本溢出时的处理，文本溢出容器时，显示一个省略号（...）；
text-overflow 属性需要和 overflow 属性一起使用，一般用于单行文本或者内联元素。*/
    width: 200px; /* 容器的宽度 */
    white-space: nowrap; /* 禁止文本换行 normal允许换行*/
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 文本溢出显示省略号 */
/*控制文本换行的方式主要通过 white-space 和 word-wrap 这两个属性来实现。这两个属性可以结合使用，以达到不同的文本换行效果。*/
    width: 300px; /* 容器宽度 */
    white-space: normal; /* 正常处理空白和换行 */
    word-wrap: break-word; /* 长单词或 URL 强制换行 */
/*word-break 属性用于控制单词如何在元素内部断开换行，主要用于处理非中文内容（如英文、数字）的换行规则；
这个属性在处理非英文内容的时候非常有用，例如在响应式设计中，或者在需要确保文本在小屏幕上显示正常时。*/
	normal：默认值。使用默认的换行规则，通常由浏览器决定如何处理。
	break-all：允许在单词内部任意位置换行，即使是在一个字符内也可以断开换行。长单词或者没有空格的文本（比如URL）时特别有用。
	keep-all：尽量不在单词内部断开换行，仅在必要的时候才允许断开换行，适合中文和日文等不使用空格分隔单词的语言。
/*结合 clamp() 函数和 line-height 的方式来实现多行文本截断，且设置行数&行高*/
    .text-container {
        display: flex; /* 使用 Flexbox 布局 */
        flex-direction: column; /* 垂直方向排列子元素 */
        max-height: calc(1.2em * 3); /* 显示大约三行文本 */
        overflow: hidden; /* 隐藏超出容器的内容 */
    }
    
    .text-container p {
        margin: 0; /* 去除段落的默认外边距 */
        line-height: 1.2em; /* 行高，根据需要调整 */
    }


表单form：
placeholder="请输入手机号";  提示信息;
	点击账号，输入框也能获取焦点：
	for 属性指定了与该标签关联的表单元素的 id，这样用户点击标签时，对应的表单元素就会获得焦点或者选中。
      <label for="demo">账号：</label>
      <input type="text" name="" id="demo">
	性别单选：
      男<input type="radio" name="gender">
      女<input type="radio" name="gender">
	爱好多选：
      吃饭<input type="checkbox">
      睡觉<input type="checkbox">
      打豆豆<input type="checkbox">
	下拉菜单：
      <select>
        <option value="">所属校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="henan">河南</option>
      </select>
	文本域：
      <textarea name="" id="" cols="30" rows="10"></textarea>
	阅读并接受《用户协议》：
      <input type="checkbox"> 阅读并接受<a href="http://www.baidu.com">《用户协议》</a>

表格table：
td{ width="10px"}  设置单元格宽度；
border-collapse:collapse;  去掉单元格之间的间隙；使用在table标签上；
text-align: right;  单元格内文本右对齐；
cellspacing="0"；  外间距；

文本框input:
transition: all 2s;过渡效果

--------------------------------效果设置------------------------------------
元素隐藏的三种方式：
display: none; 不显示，不占据位置；
visibility: hidden; 不显示，占据网页位置；
opacity: 0.5; 透明度，值为0时不显示，占据网页位置；
超出部分隐藏：
/*可以应用于包含块级元素或内联块级元素。这些属性可应用于任何具有限定高度或宽度的元素，以便控制元素内容溢出时的行为。*/
overflow:hidden;
	visible：默认值。内容不会被修剪，会呈现在元素框之外。
	hidden：内容会被修剪，并且不会显示溢出部分。
	scroll：如果内容溢出，则显示滚动条，允许用户滚动查看内容。
	auto：如果内容溢出，则显示滚动条，只在必要时显示滚动条。
	overlay：当内容溢出时，浏览器会显示一个滚动条，但内容不会移动，而是覆盖在元素上方。



鼠标悬停：
a :hover{ }  鼠标悬停效果；
body:hover div{ display:none; }  使用body标签控制它的子元素div,只让div产生效果；
box-shadow: x轴偏移量 Y轴偏移量 阴影模糊程度 阴影扩展半径 阴影颜色 inset内阴影；
box-shadow: 3px 3px 9px 100px gray ; 盒子阴影；
text-shadow:  文字阴影；
opacity: 0.2; 透明效果；
background-color:rgba(x,x,x,x)； 透明度在0~1之间；

浮动代码举例：

如果子盒子的子盒子也需要浮动在子盒子的某个位置（例如右下角），你可以继续使用 position 属性来实现这个布局。

<div class="parent-box">
  <div class="child-box">
    <div class="grandchild-box">浮动子盒子的子盒子</div>
  </div>
</div>

.parent-box {
  position: relative; /* 使父盒子成为定位的参考点 */
  width: 300px; /* 父盒子的宽度 */
  height: 200px; /* 父盒子的高度 */
  background-color: #f0f0f0; /* 背景色，仅用于视觉效果 */
  border: 1px solid #ccc; /* 边框，仅用于视觉效果 */
}

.child-box {
  position: absolute; /* 相对于父盒子定位 */
  bottom: 0; /* 距离父盒子底部0 */
  right: 0; /* 距离父盒子右侧0 */
  background-color: #ff5722; /* 背景色，仅用于视觉效果 */
  color: white; /* 文字颜色 */
  padding: 10px; /* 内边距 */
  position: relative; /* 子盒子的相对定位，使其子盒子可以以其为参考进行绝对定位 */
}

.grandchild-box {
  position: absolute; /* 相对于子盒子定位 */
  bottom: 0; /* 距离子盒子底部0 */
  right: 0; /* 距离子盒子右侧0 */
  background-color: #4caf50; /* 背景色，仅用于视觉效果 */
  color: white; /* 文字颜色 */
  padding: 5px; /* 内边距 */
}