- 博客(35)
- 收藏
- 关注
RSS订阅原创 前端学习DAY33（外边距的折叠）
兄弟元素之间的相邻外边距会取（绝对值）最大值，而不是取和，谁大取谁。如果相邻的外边距都是负值，则取绝对值较大的。特殊情况：如果相邻的外边距一正一负，则取两者的和。若距离设置为上边元素外边距为-20PX下边元素外边距是10PX则取10PX。如距离设置为上边元素外边距为-20PX下边元素外边距为-20PX则取20PX。在网页中相邻的垂直方向的外边距，会发生外边距的重叠。兄弟元素的外边距重叠，并对开发有利，不用处理。为上边的元素设置一个外边距box1。为下边的元素设置一个外边距box2。
2025-01-08 22:11:49
238
原创 前端学习DAY32（垂直外边距的重叠）
BFC（block formatting context，快格式化上下文）是WEB页面的可视化css渲染的一部分，是块盒子的布局。方案2、为outer设置一个上边框，会改变盒子的大小，有1px的边框transparent。过程发生的区域，也是浮动元素与其他元素交互的区域。启元素的隐含属性 overflow，BFC。方案1、用padding,改父元素高度。BFC理解为子元素不会影响到其他元素。
2025-01-07 23:52:20
220
原创 前端学习DAY31（子元素溢出父元素）
可选值：visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示。父元素中溢出，使用overflow属性设置父元素如何处理溢出的子元素。auto 根据需要生成滚动条（根据父元素设置横向或纵向滚动条）子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从。overf-y 生成Y轴的滚动条(一般默认就有）scroll 生成两个滚动条，通过滚动条来查看完整的内容。hidden 溢出的内容将会被裁剪不会显示。overf-x 生成X轴的滚动条。额外俩个属性（了解）
2025-01-06 22:00:00
334
原创 前端学习DAY30（水平）
可选值：visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示。父元素中溢出，使用overflow属性设置父元素如何处理溢出的子元素。子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从。scroll 生成两个滚动条，通过滚动条来查看完整的内容。hidden 溢出的内容将会被裁剪不会显示。若父元素没有规定高度，子元素撑开父元素高度（300px)auto 根据需要生成滚动条。子元素小于父元素规定高度在父元素范围内。额外俩个属性（了解）
2025-01-05 22:00:00
321
原创 前端学习DAY28（水平）
以上等式必须满足，如果相加结果等式不成立，则称为过度约束，则浏览器会让等式自动调整。0 + 0 + 0 + 200 + 0 + 0 + 0 =600 不成立。1、如果七个值中没有auto情况，则浏览器会调整margin-right值以使等式满足。会使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto。如果有设置auto，则浏览器会自动调整auto的值，以使等式成立。一个元素在其父元素中，水平布局必须要满足以下的等式。3、如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大。
2024-12-28 21:54:10
516
原创 前端学习DAY27(盒子模型内边距）
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width。可见宽的高度= border-top-width : padding-top : height + padding-bottom : border-bottom-width。顺时针上右下左 padding:10px 10px 10px 10px;上，左右，下 padding:10px 20px 10px;
2024-12-26 22:00:00
383
原创 前端学习DAY27(外边距）
外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距，规则和padding一样。本所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，下外边距，设置一个正值，其下边的元素会向下移动，挤别人。而如果是设置右和下外边距会改变其他盒子的位置（挤别人)他不会影响可见框的大小，而是会影响到盒子的位置。上外边距，设置一个正值，元素会向下移动。如果外边距设置的是负值，则元素会向反方向移动。左外边距，设置一个正值，元素会向右移动。外边距指的是当前盒子与其他盒子之间的距离，本盒子有四个方向的外边距;
2024-12-26 21:41:15
164
原创 前端学习DAY24（盒子边框）
如果在Border-width指定了四个值，则这四个值分别设置给上 、右、下、左。xxx的值可能是top、right 、 bottom、left、专门用来设置指定边的宽度。大部分的浏览器中，边框的宽度和颜色都是有默认值的，且边框的样式默认值都是none。边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色，而且没有任何顺序要求，同时也是提供border-xxx-style四个样式，来分别设置四个边。和宽度一样，color也是提供四个方向的样式，可以分别指定颜色。设置边框颜色，默认值是黑色。
2024-12-20 22:00:00
289
原创 前端学习day23(盒子模型）
元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家身所以我们把所有的元素都想成盒子，矩形。border-width:边框的宽度 border-color:边框颜色 border-style:边框的样式。-将元素设置为矩形的盒子后，对页面的布局就变成了不同的盒子摆放到不同的位置-每一个盒子，都有以下几个部分组成。边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部设置边框必须指定三个样式。-盒子可见框的大小由内容区，内边距和边框共同决定。内容区(content)
2024-12-19 22:00:00
196
原创 前端学习DAY22（行间距）
在font 中也可以指定行高，在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值，*行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，2.可以指定一个百分数，则会相对于字体去计算行高，eg: 30%3.可以直接传一个数值，则行高会设置字体大小相应的倍数，对于单行文本来说，可以将行高设置为和父元素高度一致。行高（line ·height）--文字占有的实际高度。eg: 2一行高经常还用来设置文字的行间距。实际上就是在设置字体框的高度。是字体纯在的格子，设置。
2024-12-18 22:00:00
747
原创 前端学习DAY21（字体的其他样式）
改样式也可指定100~900之间的9个值，但是由于用户的计算机往往没有很多级别的字体，所以达到我们想要。小型大写字母：将所有的字母都以大写形式显示，但是小写字母的大写，要比大写字母尺寸小一些。使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写。的效果也即是200有可能比100粗，300有可能比200粗，但是也可能是一样的。可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开。如果不写则使用默认值，但是要求文字的大小和字体必须写，italic 文字会以斜体显示。
2024-12-17 22:00:00
738
原创 前端学习day20(字体的分类）
可以将字体设置为这些大的分类，当设置为大的分类以后，，浏览器会自动选择指定的字体并应用样式。一般会将字体的大分类，指定为font-family中的最后一个字体，用来作文基础。sans-serif(非衬线字体)可以将服务器中的字体直接提供给用户，去使用。monospace(等宽字体)属性：给字体起的名字。serif （衬线字体）cursive(草书字体)fantasy(虚幻)网页中将字体分成5大类。
2024-12-16 22:04:18
236
原创 前端学习day19(字体样式）
如果字体不支持，则使用默认字体，该样式可以同时指定多个字体，多个字体之间使用，分开。被设置的font-size实际上是设置格的高度，并不是字体的大小一般情况下文字都。当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有再尝试下一个。1）设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中。在开发中，如果字体太奇怪，用的太少了，一般不使用，可能用户电脑没有，就达不到预期的效果。浏览器使用的字体默认是计算机中的字体 如果计算机有，则使用，没有就不用。2）设置文字的大小，浏览器中一般。
2024-12-14 22:00:00
443
原创 前端学习day17（字体样式-长度单位）
em 根据当前的字体大小取计算，1em=1font-size(font-size:20px;比如根标签的字体大小是25px,那么设置rem根据25px来计算，10rem=10*25px。-像素是我们在网页中使用的最多的一个单位，一个像素就相当于我们屏幕中的一个小点，也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值。使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变。em和百分比类似，它是相对于当前元素的宇体大小来计算的。
2024-12-12 22:00:00
156
原创 前端学习day16(多行文本及省略效果）
webkit-line-clamp 用来限制在一个块元素显示的文本的行数，为了实现这个效果，它需要组。适用范围：因为使用了webkit 的css扩展属性，该方法适用于webkit浏览器级移动端。必须结合的属性，将对象作为。弹性伸缩盒子模型显示vertical 从上到下垂直排列子元素。合其他webkit属性， 常见结构属性；
2024-12-11 22:00:00
241
原创 前端学习DAY15(文本样式）
vertical-align只对行内元素、行内块元素和表格单元格元素生效；解决方式四、使元素脱离文档流，例如浮动、绝对定位、弹性盒子等。父元素若不设置高，由图片撑开，此时图片的底部就会由三像素的空白。解决方式三、给父元素设置font-size为0。参数4、可选，阴影的颜色，一般用rgba。参数1、必须，水平阴影的位置，允许负值。参数2、必需，垂直阴影的位置，允许负值。可水平，垂直移动，模糊度越高显示越大。解决方式二、给图片转换成块元素。应用：1、图文垂直对齐的方式。参数3、可选，模糊的距高。
2024-12-08 22:48:46
158
原创 前端学习DAY14(文本样式）
通过调整文本之间的空格大小，来达到应该两端对齐的目的，也可以让图片水平居中。超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline。通过这种方式可以将一些不需要显示的文字隐藏起来，思路：先换行，再把溢出文本框的给隐藏起来，隐藏起来的内容怎么显示告诉用户。可选值：left 默认值，文本靠左对齐。指定一个负值时，则会向左移动指定的像素。none 默认值，该怎么显示就怎么显示，不做任何处理。none 默认值，不添加任何修饰，正常显示。right 文本靠右对齐。
2024-12-05 21:59:48
419
原创 前端学习DAY13（css、选择器回顾）
要求2、给含有title属性的诗句加红色，并且给已属性值e结束的诗句变大字体5px。要求1、通过div超市，找到span衣服，给span衣服设置字体颜色蓝色。要求4、通过span洗发水，找到后面所有的兄弟，给他们设置字体颜色 黄色。要求2、通过div超市，找到span洗发水，给洗发水设置背景颜色粉色。要求3、通过span洗发水，找到纸巾，给纸巾字体放大到29px。要求6、在首字母前加入结尾,字体颜色变为红色。要求7、在末尾加入结尾，字体颜色为红色。要求5、段落的文字第一个字一直是红色。
2024-12-04 22:00:00
216
原创 前端学习DAY12(权重、侧边导航）
样式冲突 通过不同的选择器选中同一个元素，进行一样的样式设定发生样式冲突时，应该用哪一个样式由选择器的权重（优先级）决定。
2024-12-03 22:02:20
382
原创 前端学习DAY11（伪元素、继承）
表示页面中一些特殊的并不真实存在的元素（元素的位置）：：first-letter表示第一个字母：：first-line表示第一行：：selection 表示选中的内容：：before表示元素的开始位置：：after表示元素的结束位置before和after必须结合content使用lorem 生成随机英文段落下载Chinese lorem插件，jw生成随机中文段落要求1、让文章的首字母一直为字体25px要求2、让文章的第一行的背景颜色为紫色要求3、让选中的内容，字体变为红色。
2024-12-02 22:00:00
369
原创 前端学习DAY10
总结：link和visited是a标签独有的状态，hover和active是所有元素都可以设置的。2、：visited用来表示访问过的链接（因为隐私原因，所有visited只能改颜色）1、：link 用来表示未访问过的链接（正常链接）要求3：鼠标移入，链接字体变成25px大小。3、：hover用来表示鼠标移入的状态。要求1:给未访问过的超链接加紫色字体。要求2：给访问过的超链接加绿色字体。要求4：鼠标点击后，增加背景色粉色。4、：active 鼠标点击后状态。
2024-11-30 22:00:00
198
原创 前端学习DAY9
本页面通过，让背景铺在下面，侧边栏通过绝对定位的方式定位在背景的左侧，没有用浮动，然后给侧边栏一个背景色透明rgba（0,0,0，.3）设置透明色。第二种方法就是通过浮动，定义一个父元素，里面包裹两个小盒子分别为left和right，通过浮动的程序让侧边栏左边图片向左浮动，右边图片向右浮动。但是这样设计比较生硬，而小米官网采用的的是绝对定位的方式，给侧边栏一个浮动在背景图片上面的一个图层的感觉。
2024-11-29 22:00:50
283
原创 前端学习DAY8
要求6：第三句额外字体变荧光粉色，用复合选择器（有2种交集div和并集:不同的标签相同的样式，逗号隔开）要求2：通过class属性值“l1"找到下面所有的兄弟，加背景为pink。要求5：第二句、第三句加背景颜色黄色，用class选择器，用外部样式表。要求4：第一句字体15px，用id选择器 ，内部样式表。要求1：通过ul找到诗句“凄凄惨惨戚戚”，字体变紫色。要求3：标题变蓝色，用内联样式。后代选择器（由空格）
2024-11-28 21:15:00
172
原创 前端学习DAY5
声明块紧跟在选择器的后面，使用一对{}括起来，通过声明块来指定要为元素设置的样式，声明块实际上就是一组一组的名值对结构，一组一组的名值对称之为声明。作用和html注释类似，只不过它必须编写在style标签中，或者是css文件中css语法，选择器，声明块，选择器。作用：根据元素的class属性值为元素分组，它和id类似，不同的是可以重复使用,可以写多个类名。在一个声明块中可以写多个声明，多个声明之间使用；作用：根据元素的id属性值，选中一个元素。例子：p{},h1{},h3{}作用：选中页面中的所有元素。
2024-11-25 18:00:00
363
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人