您的位置: 首页  >  文章  >  小白初体验2

小白初体验2

分类: 文章 • 2023-03-07 19:11:54

1.在所有浏览器的解决方案中，设置元素的默认字体大小的是百分比body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

  • font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换成大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小 font-variant 属性主要定义小型大写字母文本`p.small
    {
    font-variant:small-caps;
    }
  • css链接样式 ：a:link - 正常，未访问过的链接
    a:visited - 用户已访问过的链接
    a:hover - 当用户鼠标放在链接上时
    a:active - 链接被点击的那一刻
  • a：hover 必须跟在a:link和 a:visited后面
    a:active必须跟在a:hover后面
    4.css盒子模型（BOx Model）,所有的html元素都可以看做盒子，在css中，“boxmodel”是用来设计和布局时使用，css盒模型本质上是一个盒子，*周围的html元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。
    小白初体验2
    不同部分的说明：
    margin（外边距）：清除边框外的区域，外边距是透明的。
    Border（边框）-围绕在内边距和内容外的边框
    padding（内边框）-清除内容周围的区域，内边距是透明的
    content（内容）-盒子的内容，显示文本和图像
    最终元素的总宽度计算公式是这样的
    总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
    元素的总宽度计算公式是这样的
    总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
    浏览器的兼容问题：不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素
    IE8及更早版本不支持设置填充的宽度和变宽的宽度属性
    解决IE8及更早版本不兼容问题可以在html页面声明即可。

css轮廓（outline）
轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。（注意，outline是不占空间的）
大多数默浏览器默认的行高约20 px；

display(显示)与Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性制定一个元素应可见还是隐藏
隐藏元素-display:none或visibility：hidden
visibility：hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，也就是说，该元素虽然被隐藏了，仍然会影响布局。
display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本所占用的空间也会从布局中消失。

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，*地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将

    元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
    对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。

visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：

1、display:none 元素不再占用空间。
2、visibility: hidden 使元素在网页上不可见，但仍占用空间。
然而，visibility 还可能取值为 collapse 。

当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。

在不同浏览器下，对 visibility: collapse 的处理方式不同：

1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
2、在 IE 即使设置了 visibility: collapse，还是会显示元素。
3、在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，visibility: collapse 与 visibility: hidden 没有什么区别，即仍会占用空间。
css position属性

  • position 属性指定了元素的定位类型
  • position属性的5个值：satic relative fixed absolute sticky
  • static定位：html元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素- 不会受到top，bottom，right影响
  • fixed定位：元素的位置相对于浏览器窗口的固定位置。即使窗口时滚动的它也不会移动，可以设置top、left、right、bottom等属性。Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。
  • relative 相对定位元素的定位时相对其正常定位。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
  • absolute：定位绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
  • sticky 定位
    sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

`

相关推荐