- 博客(29)
- 收藏
- 关注
RSS订阅原创 等高布局和双飞翼布局
移动，right通过margin-left：-右盒子宽度，配合相对定位，left：右盒子的宽度；移动，left通过margin-left：-100%，配合相对定位left：-左盒子宽度；centerBox内部的center盒子，不固定宽度，通过左右margin预留出左右两个盒子的位置。移动right盒，通过margin-left：-右盒子宽度；原理：盒子的层层嵌套，利用内盒子高度变化，外盒子的高度也会同步变化。步骤：外盒子左右固定padding值，预留左右两侧盒子的位置。将内容盒移动到对应的背景处即可。
2023-02-26 19:35:47
86
原创 浮动的语法
浮动可以让元素【脱离文档流】，按【照指定的方向进行排列】，直到遇到父元素的边界或另外一个浮动元素【停止】在浮动元素的最后面加一个空的块级标签，此元素本身不浮动，并且添加样式clear属性（作用：清除浮动）给父元素添加overflow属性，overflow值不为visible，其他值都可以实现。网页中有很多布局效果，标准的布局方式没法完成，使用浮动改变元素的默认排列方式。after：在wrap元素里面最后面加一个伪类元素（行级元素）给浮动元素的父元素添加盒类名clearfix。子元素浮动导致父元素高度塌陷。
2023-02-26 19:34:27
115
原创 定位的语法
能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或固定在屏幕中的某个位置）表示将元素放在文档流的默认位置，html元素的默认值，即没有定位，遵循正常的文档流布局，静态定位的元素不会受到边偏移量的影响。相对于元素在正常文档流中的位置移动它，把一个正常布局流中的元素从它默认位置按照坐标进行相对移动。元素的位置相对于浏览器的窗口进行固定，即使窗口是滚动的它也不会移动。相对于元素本身的位置发生移动，它原本所占的空间不会改变。语法：position:fixed;
2023-02-26 19:33:51
108
原创 盒模型和元素转换
盒子实际高度=height+border-top+border-bottom+padding-top+padding-bottom。盒子实际宽度=width+border-left+border-right+padding-left+padding-right。行级元素只能容纳文本或者其他的行级元素（不能再行级元素里面嵌套块级元素）转化为行内块元素：display:inline-block;在不设置宽度的情况下：块级元素的宽度是他父级元素内容的宽度。在不设置高度的情况下：块级元素的高度是他本身内容的高度。
2023-02-26 19:30:21
163
原创 背景图语法
contain：包含等比例缩放背景图片到完整的盒子中，但是背景图再区域范围内不能铺满，取决于盒子和图片的比例不一致。border-box 背景裁剪到边框区域，在内容区、内填充区、边框区显示（默认值）第一个值表示水平方向，第二个值表示垂直方向，如果只出现一个值，另一个值是50%语法：background-image：url（图片路径），url（图片路径）padding-box 背景裁剪到内填充区域，在内容区和内填充区显示。取值：content-box 背景裁剪到内容区域，仅在内容区显示。
2023-02-26 19:28:22
162
原创 常用文本属性
如果浏览器不支持第一个字体，则会尝试下一个字体（回退机制）rgb色值 rgb（0,255,0）0~255之间。如果用于其他属性，相对于当前元素的字号进行计算。取值：normal 正常显示（默认值）rgba（） a透明度0~1（背景透明）语法：字体倾斜、字体加粗、字号/行高字体；注意：只有当字号和字体同时存在时简写才生效。如果用于字号，相对于父元素字号进行计算。背景颜色的作用范围：内容+边框+内填充。元素背景都有哪些：背景颜色、背景图片。取值：颜色的名称red、yellow。百分比：相对于父元素进行计算。
2023-02-26 19:26:47
91
原创 什么是浏览器内核
【行为标准】主要用于对网页信息的结构和显示进行逻辑控制，实现网页的智能交互，对应本课程中Javascript（如W3C DOM和EMAScript等）HTML：（Hyper Text Markup Language）超文本标记语言——负责网页的结构层。【表现标准】主要用于设计页面的表现效果如网页元素的板式，颜色，大小等外观样式，表现标准语言指css。JavaScript：简称js，用于网页交互的解释性脚本语言——负责网页行为层。
2023-02-26 19:18:27
63
原创 响应式布局
具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。这样就可以不必为不断到来的新设备做专门的版本设计和开发了。响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。背景：移动互联网的发展，为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生，1.虚拟窗口：创建虚拟窗口，自定义窗口的大小和缩放功能，能适应移动设备的屏幕大小。1.可以根据设备显示器的特性，来设置不同的css的样式。
2023-02-25 12:56:28
52
原创 网格布局 CSS
Auto-fill关键字：单元格大小固定但是容器大小不确定，如果希望每行或每列容纳尽可能多的单元格时使用 grid-template-columns:repeat(auto-fill,100px);repeat(重复的次数，一个或空格隔开的多个值 ) grid-template-columns: repeat(2, 100px);auto关键字：表示浏览器自行决定 grid-template-columns: 100px auto 100px;列的宽度：column-width：100px；
2023-02-25 12:54:07
82
原创 网格布局语法
简写：grid-column属性是grid-column-start和grid-column-end的合并简写形式。place-items属性是align-items属性和justify-items属性的合并简写形式。grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。- place-self属性是align-self属性和justify-self属性的合并简写形式。grid-column-start属性：左边框所在的垂直网格线。一个双引号一行，一个空格一列。
2023-02-25 12:50:44
82
原创 布局视口与流式布局
流式布局是宽度使用百分比代替固定宽度px，高度大多使用px来固定，因此在大屏幕手机下显示的效果会变成页面元素的宽度被拉长，高度和原来保持一致。rem---css3中的一个单位，相对单位，根据【根元素】的字号大小进行计算的单位。Height：设置viewport（电脑屏幕的视口）的高度（一般情况用不到）缺点：1、实际显示的效果不友好，屏幕越大，宽度被拉的很长，容易变形。动态计算并且设置不同尺寸的html的font-size属性。initial-scale：页面的初始缩放比。优点：可以很好的解决自适应的问题。
2023-02-25 12:49:59
92
原创 2D平移与旋转
transform：scale（x，y）沿着x轴和y轴缩放 只有一个值时，沿着水平和垂直方向等比例缩放。例：transform：translate3d（1，1，1，45deg）;transform：translate3d（x，y，z，度数）;平移属性：transform:translate(x,y)；ease（默认值）慢速开始---速度变快---慢速结束。
2023-02-25 12:49:54
213
原创 弹性盒子的语法
缩小的宽=（当前元素的宽*shrink值）/（元素1*元素1的shrink值+元素2*元素2的shrink值...）*溢出的空间宽度（子元素宽度之和-父盒子宽度）定义弹性盒子元素的基准值（参与计算的最终值---1、基于它计算了容器的剩余空间 2、基于它计算增长以后的最终值）弹性子元素--类似于行内块元素，如果不设置宽高，由内容撑开；默认的交叉轴（侧轴）方向---y轴的方向，水平向下（上方为侧轴起点，下方为侧轴的终点）默认的主轴方向---x轴的方向，水平向右（左侧边为主轴的起始点，右侧边为主轴的终点）
2023-02-25 12:49:07
85
原创 盒子阴影与线型渐变
语法：background：repeating-radial-gradient（渐变形状，圆心，颜色1 范围1；语法：background：repeating-radial-gradient（渐变形状，圆心，颜色1 范围1；Background：repeating-linear-gradient（方向，颜色1，范围1，颜色2，范围2...）语法：background：radial-gradient（渐变的形状，颜色1 范围1，颜色2 范围2...）;（方向，颜色1，范围1，颜色2，范围2...）
2023-02-25 12:48:01
251
原创 结构性伪类选择器
ele：nth-last-child（n）选择一组相同元素中的倒数第n个元素，n表示数值、关键词、表达式。ele：nth-child（n）{选择一组相同元素中的第n个元素，n表示数值、关键词、表达式}/* 左上 右上、左下 右下*/.wrap div[class*=n]{带有class属性,并且属性值有n的div元素}ele：nth-last-of-type（n）{选择一组元素中特定类型的倒数第n个元素}ele：nth-of-type（n）{选择一组元素中特定类型的第n个元素}/* 四个角都相同 */
2023-02-25 12:47:04
100
原创 html5新特性
input type="text" placeholder="提示信息" name="nane" autocomplete="on" autofocus>-- 用于电话号码的输入框，一般用于触屏的网页，在电脑中无效，在触屏网页中会直接调用虚拟的电话数字键盘 -->
2023-02-25 12:45:27
144
原创 选择器与边框
ele：nth-last-child（n）选择一组相同元素中的倒数第n个元素，n表示数值、关键词、表达式。ele：nth-child（n）{选择一组相同元素中的第n个元素，n表示数值、关键词、表达式}/* 左上 右上、左下 右下*/.wrap div[class*=n]{带有class属性,并且属性值有n的div元素}ele：nth-last-of-type（n）{选择一组元素中特定类型的倒数第n个元素}ele：nth-of-type（n）{选择一组元素中特定类型的第n个元素}/* 四个角都相同 */
2023-02-25 12:42:55
63
原创 重复性线型渐变
Background：repeating-linear-gradient（方向，颜色1，范围1，颜色2，范围2...）Background：radial-gradient（渐变的形状，颜色1 范围1，颜色2 范围2...）；（方向，颜色1，范围1，颜色2，范围2...）百分比：按照盒子的大小进行百分比计算，宽，高 如果只设置一个值，第二个值会被自动设为auto。h-shadow：阴影的水平偏移量，正数右，负数左，必须属性，单位px。v-shadow：阴影的垂直偏移量，正数下，负数上，必须属性，单位px。
2023-02-24 20:00:54
62
原创 什么是精灵技术
css精灵英文叫法“CSS sprites”，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS“background image”，“background-repeat”，“background-position”的组合进行背景定位，background-position精确的定位出背景图片的位置。/* 溢出显示省略号 *//* 强制不换行 */适用于一般小图片（小图标、小背景），不适合大背景大布局的图片。/* 溢出隐藏 */
2023-02-24 20:00:02
46
原创 什么是BFC?
块级格式化上下文”它是一个独立的渲染区域，只有block-level box（当前盒子）参与，它规定了内部的lock-level box如何布局，并且与这个区域外毫不相干。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)即使存在，浮动也是如此。Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。防止margin的塌陷。
2023-02-24 19:59:44
133
原创 元素之间的转换
行内块元素--本身属性为display：inline-block；的元素才能被称为行内块元素。行级元素--本身属性为display：inline；的元素才能被称为行级元素。块级元素--本身属性为display：block；的元素才能被称为块级元素。2、行级元素只能容纳文本或其他的行级元素（不能在行级元素里嵌套块级元素）2、在不设置宽度的情况下：块级元素的宽度是他父级元素内容的宽度。3、在不设置高度的情况下：块级元素的高度是他本身内容的高度。html元素分为三大类：块级元素、行级元素、行内块元素。
2023-02-24 19:57:04
115
原创 什么是表单
textarea标签：注意：name属性是必须属性，只有设置了name属性表单元素在提交的时候才会传递他们的值。value属性：默认显示文本是“提交”可以使用value属性修改里面的内容。value属性：默认显示文本是“重置”可以使用value属性修改里面的内容。属性：src:指定图片的路径 alt:指定替换的文本。
2023-02-24 19:56:57
201
原创 复合选择器
盒子实际高度：height+border-top+border-bottom+padding-top+padding-bottom。盒子实际宽度：width+border-left+border-right+padding-left+padding-right。a:link{未访问前} a：visited{链接访问后} a：hover{鼠标悬停在链接上} a：active{鼠标摁下后}注意：书写顺序link visited hover active（l-v--h-a）”lv hao”
2023-02-24 19:55:59
73
原创 选择器和文本
margin-top上外边距 margin-bottom 下外边距 margin-left左外边距 margin-right右外边距。padding-top上填充 padding-bottom下填充 padding-left左填充 padding-right右填充。九级自重：100~900；注意：如果字体名称里包含空格、汉字、特殊符号，必须加引号“”长度值（px）：16px（浏览器默认字体为16像素）取值：一个字体名称 微软雅黑 浏览器的默认字体。语法：字体风格 字体加粗 字号/行高 字体；
2023-02-24 19:53:00
34
原创 html说明
html：Hyper Text mark-up Language：超文本标记语言。内容注意事项：P标签里不能再嵌套【块级标签】；注意事项：h1标签在一个页面中只能有一个，h2~h6可以有多个。作用：用来划分网页的区块，里面可以嵌套任何标签。搭建网页结构的基本标签---盒子：无语义标签。双标签：内容应用场景：文章中的段落，页面中的文字块。单标签：或h系列标签：标题标签 h1~h6。
2023-02-24 19:45:21
37
原创 表格标签与外部样式
总结：划分表格的语义，实现长表格的分布加载，改变结构顺序，进行优先加载tbody。--定义表格的主体内容 一个表格里面可以包含多个tbody -->使用table标签定义表格，每个表格由若干行（由tr定行），每行被分为若干个单元格（由td定义）以前整个页面的布局都使用的是表格、结构复杂、维护起来麻烦。1、未定宽度和高度的表格，单元格的内容自适应。-- 定义表格页脚内容 -->-- 表头内容 -->
2023-02-24 19:40:52
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人