p {
  border: 1px solid black;
}

#p1 {
  width: 60px;
  height: 20px;
  background-color: Orange;
  font-size: large;
  float: right;
}

#p2 {
  border: 1px solid black;
  background-color: DodgerBlue;
}

#dogerBox {
  border: 1px solid black;
  background-color: DodgerBlue;
}

div+p {
  width: 40px;
  height: 80px;
  background-color: Orange;
  font-size: large;
  float: right;
}

#first {
  width: 330px;
  height: 250px;
  background: LightBlue;
  overflow: visible;
  border: 1px solid black;
}

#first #headers {
  position: relative;
  width: 20%;
  height: 7%;
  margin: auto;
  margin-bottom: 65%;
  background: Orange;
  left: 6px;
  float: right;
  border: 1px solid black;
  margin: 1px;
}

#second {
  width: 330px;
  height: 250px;
  background: LightBlue;
  overflow: hidden;
  border: 1px solid black;
  position: relative;
  left: 332px;
  bottom: 252px;
  margin: 1px;
}

#second #headers {
  position: relative;
  width: 20%;
  height: 7%;
  margin: auto;
  margin-bottom: 65%;
  background: Orange;
  left: 6px;
  float: right;
  border: 1px solid black;
}

<div id="first">
  <div id="headers"> First Box </div>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,as opposed to using ''Content here,content here'',making it look like readable English. Many desktop publishing packages and web page editors Now use Lorem Ipsum as their default model text,and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. VarIoUs versions
  have evolved over the years,sometimes by accident,sometimes on purpose (injected humour and the like).
</div>
<div id="second">
  <div id="headers"> Second Box</div>
  Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 2000 years old. Richard Mcclintock,a Latin professor at Hampden-Sydney College in Virginia,looked up
  one of the more obscure Latin words,consectetur,from a Lorem Ipsum passage,and going through the cites of the word in classical literature,discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
  et Malorum" (The Extremes of Good and Evil) by Cicero,written in 45 BC. This book is a treatise on the theory of ethics,very popular during the Renaissance. The first line of Lorem Ipsum,"Lorem ipsum dolor sit amet..",comes from a line in section
  1.10.32.
</div>
<div>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,sometimes on purpose (injected humour and the like).
</div>

body {
  margin: 0;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: 10px;
  padding: 10px;
}

#first,#second {
  background: LightBlue;
  border: 1px solid black;
  padding: 10px;
}

.headers {
  width: 40%;
  height: auto;
  margin: -8px -8px 0.2em 0.2em;
  background: Orange;
  float: right;
  border: 1px solid black;
  text-align: center;
}

<div>
  <div id="first">
    <div> First box </div>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,as opposed to using ''Content here,content here'',making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various
    versions have evolved over the years,sometimes by accident,sometimes on purpose (injected humour and the like).
  </div>
  <div id="second">
    <div> Second box</div>
    Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 2000 years old. Richard McClintock,a Latin professor at Hampden-Sydney College in Virginia,looked up
    one of the more obscure Latin words,consectetur,from a Lorem Ipsum passage,and going through the cites of the word in classical literature,discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero,written in 45 BC. This book is a treatise on the theory of ethics,very popular during the Renaissance. The first line of Lorem Ipsum,"Lorem ipsum dolor sit amet..",comes from a line in section
    1.10.32.
  </div>
</div>

.main {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

p {
  width: 40px;
  height: 80px;
  background-color: Orange;
  font-size: large;
  float: right;
  border: 1px solid black;
}

.headers {
  background: Orange;
  float: right;
  border: 1px solid black;
  padding: 3px;
}

#first,#second {
  background: LightBlue;
  border: 1px solid black;
  padding: 10px;
  flex: 300px;
}

<div>
  <div id="first">
    <div> First box </div>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various versions
    have evolved over the years,comes from a line in section
    1.10.32.
  </div>
</div>

ASP.NET MVC 中＠Html.Partial，＠Html.Action，＠Html.RenderPartial，＠Html.RenderAction

1.Action、RenderAction加载办法的视图，履行Controller → Model → View的次序，然后把产生的页面带回到本来的View中再回传。而Partial、RenderPartial直接加载视图文件内容

2.Html.Partial可以直接供给用户控件名作为参数，而Html.Action须要有对应的Action，在Action内部返回PartailResult（即retun PartialView（））。

3.对于简单的没有任何逻辑的用户控件，推荐应用Html.Partial；对于须要设置一些Model的用户控件，推荐应用Html.Action。当然，有Model数据也是可以应用Html.Partial办法的，可以看办法的重载。

4.Html.Partial与Html.Action有啥区别呢？区别就是，Html.Partial只有一个视图，而Html.Action除了视图，还真的有个Action跟它对应，所以，Html.Action功能比Html.Partial要强。

如何调用这个Html.Partial

 //1、以视图名使用当前文件夹下的视图（如果没有找到，则搜索 Shared 文件夹）

asp.net – Html.Partial vs Html.RenderPartial&Html.Action vs Html.RenderAction.任何人都可以描述不同之处

Html.Partial and Html.RenderPartial
Html.Action and Html.RenderAction

asp.net 中@Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction

1、带有Render的方法返回值是void，在方法内部进行输出；不带的返回值类型为MvcHtmlString,所以只能这样使用：

     @Html.Partial 对应 @{Html.RenderPartial(....);}@Html.Action 对应 @{Html.RenderAction(....);}

2、Html.Partial可以直接提供用户控件名作为参数，

    而Html.Action需要有对应的Action，在Action内部返回PartailResult(即retun PartialView())。

3、对于简单的没有任何逻辑的用户控件，推荐使用Html.Partial；对于需要设置一些Model的用户控件，推荐使用Html.Action。当然，有         Model数据也是可以使用Html.Partial方法的，可以看方法的重载。

4、使用Html.Action有个好处，就是可以根据不同的场景选择不同的用户控件。比如：@Html.Action("UserInfoControl")在对应的    UserInfoControl这个Action中,在用户未登录的时候，可以retun PartialView("LogOnUserControl");登录后，可以retun  PartialView("UserInfoControl");

CS50 HTML 和 CSS 基础 (介绍最简单的 HTML 和 CSS)

最近简单 HTML 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body>
        Hello, world!
    </body>
<html>

HTML 中 form 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Forms</title>
</head>
<body>
    <form>
        <input type="text" placeholder="First Name" name="first">
        <input type="password" placeholder="Password" name="password">
        <div>
            Favorite Color:
            <input name="color" type="radio" value="blue"> Blue
            <input name="color" type="radio" value="green"> Green
            <input name="color" type="radio" value="yellow"> Yellow
            <input name="color" type="radio" value="red"> Red

        </div>
        <input type="submit">
    </form>
</body>
</html>

相对比较复杂的 HTML

超链接 href

有序列表和无序列表

图片

表格

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML Elements</title>
    </head>
    <body>
        <!-- We can create headings using h1 through h6 as tags. -->
        <h1>A Large Heading</h1>
        <h2>A Smaller Heading</h2>
        <h6>The Smallest Heading</h6>

        <!-- The strong and i tags give us bold and italics respectively. -->
        A <strong>bold</strong> word and an <i>italicized</i> word!

        <!-- We can link to another page (such as cs50''s page) using a. -->
        View the <a href="https://cs50.harvard.edu/">CS50 Website</a>!

        <!-- We used ul for an unordered list and ol for an ordered one. both ordered and unordered lists contain li, or list items. -->
        An unordered list:
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ul>
        An ordered list:
        <ol>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ol>

        <!-- Images require a src attribute, which can be either the path to a file on your computer or the link to an image online. It also includes an alt attribute, which gives a description in case the image can''t be loaded. -->
        An image:
        <img src="../../images/duck.jpeg" alt="Rubber Duck Picture">
        <!-- We can also see above that for some elements that don''t contain other ones, closing tags are not necessary. -->

        <!-- Here, we use a br tag to add white space to the page. -->
        <br/> <br/>

        <!-- A few different tags are necessary to create a table. -->
        <table>
            <thead>
                <th>Ocean</th>
                <th>Average Depth</th>
                <th>Maximum Depth</th>
            </thead>
            <tbody>
                <tr>
                    <td>Pacific</td>
                    <td>4280 m</td>
                    <td>10911 m</td>
                </tr>
                <tr>
                    <td>Atlantic</td>
                    <td>3646 m</td>
                    <td>8486 m</td>
                </tr>
            </tbody>
        </table>
    </body>
<html>

 CSS 简介

在 HTML 中嵌入 CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body>
        <h1 style="color: blue; text-align: center;">A Colorful Heading!</h1>
        Hello, world!
    </body>
<html>

指定整个 body 的样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body style="color: blue; text-align: center;">
        <h1 >A Colorful Heading!</h1>
        Hello, world!
    </body>
<html>

将 CSS 放在前面

 <html lang="en">
  <!DOCTYPE html>
  <head>
      <title>Hello!</title>
      <style>
          h1 {
              color: blue;
              text-align: center;
          }
      </style>
  </head>
  <body>
      <h1 >A Colorful Heading!</h1>
      Hello, world!
  </body>
  </html>

单独的 CSS 文件

 h1 {
      color: blue;
      text-align: center;
  }

<html lang="en">
  <!DOCTYPE html>
  <head>
      <title>Hello!</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <h1 >A Colorful Heading!</h1>
      Hello, world!
  </body>
  </html>

给表格添加 CSS

table {
    border: 1px solid black;
    border-collapse: collapse;
}

td {
    border: 1px solid black;
    padding: 2px;
}

th {
    border: 1px solid black;
    padding: 2px;
}

table {
    border: 1px solid black;
    border-collapse: collapse;
}

td, th {
    border: 1px solid black;
    padding: 2px;
}

更复杂的 CSS
 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Pseudoclasses</title>
        <style>
            button {
                background-color: red;
                width: 200px;
                height: 50px;
                font-size: 24px;
            }

            button:hover {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>

    </body>
<html>

今天的关于框中框 + 文本，页面 HTML/CSS 对齐和html框框居中的分享已经结束，谢谢您的关注，如果想了解更多关于ASP.NET MVC 中＠Html.Partial，＠Html.Action，＠Html.RenderPartial，＠Html.RenderAction、asp.net – Html.Partial vs Html.RenderPartial&Html.Action vs Html.RenderAction.任何人都可以描述不同之处、asp.net 中@Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction、CS50 HTML 和 CSS 基础 (介绍最简单的 HTML 和 CSS)的相关知识，请在本站进行查询。