4、页面布局——浮动 4.1、标准文档流 标准文档流：块级元素自上而下的排列，内联（行内）元素自左向右地排列，以流动的形式。 块级元素： h1-h6 p div 行内元素：不管如何设置宽和高都只会布局一个一个行内，而不是块的形状 span a img strong 行内元素可以被包含在块级元素中，反之不可。 4.2、
边框与圆角 border的三要素 border: 1px solid red; border-width（线型） dotted-点状线 dashed-虚线 solid-实线 border-style（线宽度） 如：1px border-color（线颜色） 如：red 四个方向的边框 border-top: border-right: border-bottom: border-left: 也可以使用： border-top: 1px solid
CSS属性书写顺序，建议遵循一下顺序： 1. 布局定位属性： display/position/float/clear/visibility/overflow 2. 自身属性： width/height/margin/padding/border/background 3. 文本属性： color/font/text-decoration/text-align/vertical-align/white-space/break-word 4. 其他属性(CSS3
前面的改成有滚动条的盒子类名 data-l::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .data-l::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-rad
问题描述 使用flex布局时经常会遇到这种情况 第二行只有两个数据，导致两侧对齐了。而我们预期的一般是这样子的 如何解决？ :after伪元素的妙用，在元素之后添加内容。 .instance-card-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; padding
一、什么是盒子模型 CSS盒子模型：CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。 它包括以下几个部分： margin：外边距border：边框padding：内边距 二、边框 边框的粗细边框的样式边框的颜色 <!DOCTYPE h
1：文本 1)：文字简写 // 倾斜 粗细 字号/行高 字体 font: italic bold 1em/1.5 'Courier New', Courier, monospace; 2：盒子模型 1)：内外外边距 padding/margin一个值：上下左右 padding/margin两个值：上下 左右 padding/margin三个值：上 左右 下 padding/margin四个值： 上 下 左
box-shadow 值说明 h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 inset 可选。从外层的阴影（开始时）改变阴影内侧阴
名词解释 ad 有广告的意思 item项目 本次案例的div制作是12306的广告栏所以div属性class属性值用的是ad_item margin 外边距 例子 1 margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 例子 2 margin:10px 5px 15px; 上外
1、calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都必须保留一个空格，否则不生效。例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算。（包括 %、px、vh、vw、em等）calc()函数支持 "+", "-", "*", "/" 运算；calc()函数使用标准的数学运算优先级规则
CSS练习1 1. 京东图片列表 效果截图 代码部分 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
[转] https://blog.csdn.net/wpy1282316637/article/details/68484553 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="iFrameWeb2.aspx.cs" Inherits="web2_test.iFrameWeb2" %> <!DOCTYPE html> <html
圆角边框 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了 border-radius 属性用于设置元素的外边框圆角 语法：border-radius:length; ⭐参数值可以为数值或百分比的形式 ⭐如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% ⭐
盒子阴影 box-shadow 普通阴影 box-shadow: 10px 10px ; box-shadow:水平位移 垂直位移; 带有颜色的阴影 box-shadow: 10px 10px red ; box-shadow:水平位移 垂直位移 颜色; 模糊阴影 box-shadow: 10px 10px 10px red; box-shadow:水平位移 垂直
box-shadow: h-shadow v-shadow blur spread color inset; 其中： h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 inset 可
padding:10px; 意思就是上下左右补丁距离就是10px（10像素）等于padding-top:10px; 观察下图圆框部分为 .avatar_box { padding:50px } 下图为 padding:10px
遇到的问题： 父元素是body，宽度给100%。子元素想要距离屏幕两侧各10px，但我给子元素也设置了100%且是flex布局，这时宽度超出屏幕，页面开始横向滑动！ 最终想要的效果是不横向滑动页面完整展示。 现在记录一下这个问题，警告自己，当时写的时候脑子估计废掉了。 <!DOCTYPE html> <html>
CSS练习1 1. 京东图片列表 效果截图 代码部分 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
题目：用 css 实现如下的多列布局效果：父元素宽度自适应，子元素数量随机可变的（假如 8 个），每一行有 3 个子元素，子元素之间的水平间距为 10px ，子元素的宽度自适应父元 素的宽度（(父元素宽度 - 10px * 2) / 3），子元素的高度与本身的宽度成正比（比如 2:1 ） 效果如下： 涉及到的知识
商家列表 评分图标用vant组件 标签，用vant组件 修改css <style scoped> .van-dropdown-menu >>> van-dropdown-menu__title{ color: #767676; } .van-dropdown-menu__item{ font-size: 14px; color: #767676; }</style
三角形 将 DOM 的高和宽设置为 0 像素，通过设置边框的颜色透明来画出不同的三角形，当然也可以来设置 border 的宽度来画出不同角度的三角形 .container{ width: 0; height: 0; border: 50px solid; border-color:red transparent transparent transparent; }
pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局 1分栏布局: float 2 通栏布局: 在页面中不设置宽度，让默认宽度和浏览器等宽的布局 3.版心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;心布局: 内容始终出现在整个浏览器版面的中心固定的版
Java课程–第26次日测题 一、单词： 泛型：？；注释，注解：？；相互影响：？；元数据：？；数据访问对象：？； 二、程序设计题： 1. 圆角边框的属性是什么？ 答：border-radius； 2. 盒子阴影的属性？inset是什么阴影？ 答：（1）box-shadow；（2）3D立体的凹陷阴影效果； 3. 一个无序列表，里面所有的li项的底边为1px的红色虚
<div></div> html代码 div { width: 0; height: 0; border-top: 10px solid red; border-right: 10px solid green; css代码 border-left: 10px solid blue; border-right: 10px solid pink; } <div></
可以做： calc()能让你给元素的做计算。 你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度， 比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。 实例： 三列并排的模块，宽度按百分比、有paddin
